Tailwind CSS Stacked Footers Blocks

Stacked Footers

Stacked footers with compact link rows, utility actions, and modal access for landing pages and storefront shells.

Short footer row with a compact link list and no extra utility layers.

Create a responsive UI block named "Compact Footer with Links" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/navigation-layout/stacked-footers/#compact-footer-with-links. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: navigation-layout/stacked-footers
- Block ID: compact-footer-with-links
- Source description: Short footer row with a compact link list and no extra utility layers.
- Preview iframe: https://preline.co/blocks/navigation-layout/stacked-footers/iframes/pro/compact-footer-with-links.html (repo path: blocks/navigation-layout/stacked-footers/iframes/pro/compact-footer-with-links.html)
- Source markup reference:
  - partials/pro/storefront/footers/main.html
  - partials/pro/sources/examples-content-placeholder.html
  - partials/pro/storefront/layouts-components/icon-and-link.html
  - partials/footers/copyright.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Source content inventory (from the source markup):
  - This variant renders the compact bottom bar only: one centered `flex flex-wrap justify-center items-center whitespace-nowrap gap-3` list with exactly 5 items in order - the copyright text `© 2026 Preline Labs.`, then `Terms`, `Privacy`, `Your Privacy Choices`, then the light/dark theme toggle.
  - The link-column grid, `Subscribe & get 10% off` email form, and social icons belong to the expanded variant of the same partial and must NOT appear here.
  - Every item is `text-xs text-muted-foreground-1` with `hover:underline underline-offset-4 hover:text-foreground`; items are separated by an `after:` pseudo-element dot (`after:size-1 ... after:rounded-full`) that is hidden on the last item via `last:after:hidden`.
  - The footer element is `mt-auto h-23 sm:h-16 absolute bottom-0 inset-x-0 bg-footer border-t border-footer-line`, with an inner `w-full max-w-5xl py-6 mx-auto px-4 sm:px-6 lg:px-8` wrapper.
  - The theme toggle is two stacked Preline theme buttons, not one: a moon button `data-hs-theme-click-value="dark"` with `hs-dark-mode-active:hidden flex hs-dark-mode`, and a sun button `data-hs-theme-click-value="light"` with `hs-dark-mode-active:flex hidden hs-dark-mode`; each has only an `sr-only` label (`Dark mode` / `Light mode`).
  - The striped dashed placeholder card filling the space above the footer is demo page filler, not part of the block.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<footer class="mt-auto h-23 sm:h-16 absolute bottom-0 inset-x-0 bg-footer border-t border-footer-line">
        <div class="w-full max-w-5xl py-6 mx-auto px-4 sm:px-6 lg:px-8">
          
          <ul class="flex flex-wrap justify-center items-center whitespace-nowrap gap-3">
            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
              © 2026 Preline Labs.
            </li>
            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
              <a class="text-xs text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">
                Terms
              </a>
            </li>
            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
              <a class="text-xs text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">
                Privacy
              </a>
            </li>
            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
              <a class="text-xs text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">
                Your Privacy Choices
              </a>
            </li>
            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
              
              <button type="button" class="hs-dark-mode-active:hidden flex hs-dark-mode items-center gap-x-1.5 text-sm text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-theme-click-value="dark">
                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg>
                <span class="sr-only">Dark mode</span>
              </button>
              <button type="button" class="hs-dark-mode-active:flex hidden hs-dark-mode items-center gap-x-1.5 text-sm text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-theme-click-value="light">
                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
                <span class="sr-only">Light mode</span>
              </button>
              
            </li>
          </ul>
          
        </div>
      </footer>

Open related storefront homepage

Stacked footer rows with utility links above a keyboard-shortcuts trigger.

Create a responsive UI block named "Stacked Footer with Utility Links and Shortcuts" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/navigation-layout/stacked-footers/#stacked-footer-with-utility-links-and-shortcuts. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: navigation-layout/stacked-footers
- Block ID: stacked-footer-with-utility-links-and-shortcuts
- Source description: Stacked footer rows with utility links above a keyboard-shortcuts trigger.
- Preview iframe: https://preline.co/blocks/navigation-layout/stacked-footers/iframes/pro/stacked-footer-with-utility-links-and-shortcuts.html (repo path: blocks/navigation-layout/stacked-footers/iframes/pro/stacked-footer-with-utility-links-and-shortcuts.html)
- Source markup reference:
  - partials/pro/footer-layouts/stacked-simple-with-links-and-modal.html
  - partials/pro/admin-dashboard/modals/keyboard-shortcuts.html
  - partials/pro/sources/examples-content-placeholder.html
  - partials/pro/admin-dashboard/footers/stacked-layout-main.html

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Source content inventory (from the source markup):
  - The visible footer bar is a single row (`flex flex-wrap justify-between items-center gap-2`) holding the copyright text `© 2026 Preline Labs.` on the start side and a 3-item inline list on the end side: `FAQ`, `License`, and an icon-only command/keyboard button; list items are `text-xs sm:text-sm` and separated by a slanted 1px `before:` divider (`before:w-px before:h-3.5 before:rotate-18`) hidden on the last item.
  - The footer element is `h-10 sm:h-16 absolute bottom-0 inset-x-0` with an inner `max-w-340 p-2 sm:p-5 lg:px-8 mx-auto` wrapper; the page body carries `mb-10 sm:mb-16` to reserve its space.
  - The third list item is a button with `data-hs-overlay="#hs-pro-dfkm"` and a Lucide command-key glyph (`size-3.5 sm:size-4`), which opens the keyboard-shortcuts modal.
  - Modal `id="hs-pro-dfkm"` is an `hs-overlay` that is `hidden` on first load, `role="dialog"`, `aria-label="Keyboard shortcuts"`, `z-80`, `[--close-when-click-inside:true]`, `sm:max-w-xl`, opening with `hs-overlay-open:mt-7 hs-overlay-open:opacity-100`.
  - The modal header is a search input with placeholder `Search keyboard or shortcuts` and a trailing `Cmd + K` chip; the scrollable body (`h-137.5`) has two headed groups: `Formatting` with 5 rows (`Bold` Ctrl+b, `Italic` Ctrl+i, `Underline` Ctrl+u, `Strikethrough` Ctrl+Alt+u, `Small text` Ctrl+s) and `Insert` with 6 rows (`Mention person` `(@Brian)` @, `Link to doc` `(+Meeting notes)` +, `#hashtag` #hashtag, `Date` /date Space, `Time` /date Space, `Note box` /note red Enter).
  - Each `Formatting` row label is styled as its own effect (bold, italic, underlined, line-through, smaller text) and every key chip is a `font-mono` `min-h-7.5` badge with `bg-layer border border-layer-line rounded-md`.
  - The striped dashed placeholder card above the footer is demo page filler, not part of the block.

<footer class="h-10 sm:h-16 absolute bottom-0 inset-x-0">
          <div class="max-w-340 p-2 sm:p-5 lg:px-8 mx-auto">
            <div class="flex flex-wrap justify-between items-center gap-2">
              <p class="text-xs sm:text-sm text-muted-foreground-1">
                © 2026 Preline Labs.
              </p>

<ul>
                <li class="inline-block relative pe-5 text-xs sm:text-sm text-muted-foreground-1 align-middle last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-18 before:bg-surface-3">
                  <a class="hover:text-primary-hover focus:outline-hidden focus:underline" href="#">
                    FAQ
                  </a>
                </li>
                <li class="inline-block relative pe-5 text-xs sm:text-sm text-muted-foreground-1 align-middle last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-18 before:bg-surface-3">
                  <a class="hover:text-primary-hover focus:outline-hidden focus:underline" href="#">
                    License
                  </a>
                </li>
                <li class="inline-block relative pe-5 text-xs sm:text-sm text-muted-foreground-1 align-middle sm:leading-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-18 before:bg-surface-3">
                  <button type="button" class="hover:text-primary-hover focus:outline-hidden focus:underline" data-hs-overlay="#hs-pro-dfkm">
                    <svg class="shrink-0 size-3.5 sm:size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
                  </button>
                </li>
              </ul>
              
            </div>
          </div>
        </footer>

<div id="hs-pro-dfkm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-label="Keyboard shortcuts">
      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
        <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
          
          <div class="py-2 px-4 border-b border-overlay-divider">
            <div class="relative">
              <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20">
                <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
              </div>
              <input type="text" class="py-1.5 sm:py-2 ps-7 pe-20 block w-full bg-layer border-transparent rounded-t-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:ring-0 disabled:opacity-50 disabled:pointer-events-none" placeholder="Search keyboard or shortcuts">
              <div class="absolute inset-y-0 inset-e-0 flex items-center pointer-events-none z-20">
                <span class="min-h-7.5 inline-flex justify-center items-center py-0.5 px-1.5 bg-layer border border-layer-line font-mono text-sm text-layer-foreground rounded-md">
                  Cmd + K
                </span>
              </div>
            </div>
          </div>

<div class="h-137.5 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
            <div class="p-4 space-y-5">
              <div>
                <h2 class="text-foreground font-semibold mb-2.5">
                  Formatting
                </h2>

<ul>
                  <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span class="font-bold">
                      Bold
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        Ctrl
                      </span>
                      +
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        b
                      </span>
                    </div>
                  </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span class="italic">
                      Italic
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        Ctrl
                      </span>
                      +
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        i
                      </span>
                    </div>
                  </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span class="underline underline-offset-4">
                      Underline
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        Ctrl
                      </span>
                      +
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        u
                      </span>
                    </div>
                  </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span class="line-through">
                      Strikethrough
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        Ctrl
                      </span>
                      +
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        Alt
                      </span>
                      +
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        u
                      </span>
                    </div>
                  </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span class="text-sm">
                      Small text
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        Ctrl
                      </span>
                      +
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        s
                      </span>
                    </div>
                  </li>
                </ul>
                
              </div>

<div>
                <h2 class="text-foreground font-semibold mb-2.5">
                  Insert
                </h2>

<ul>
                  <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span>
                      Mention person
                      <a class="font-semibold text-sm text-primary decoration-2 hover:underline focus:underline" href="#">
                        (@Brian)
                      </a>
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        @
                      </span>
                    </div>
                  </li>

<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span>
                      Link to doc
                      <a class="font-semibold text-sm text-primary decoration-2 hover:underline focus:underline" href="#">
                        (+Meeting notes)
                      </a>
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        +
                      </span>
                    </div>
                  </li>
              
                  <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span class="font-semibold">
                      #hashtag
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        #hashtag
                      </span>
                    </div>
                  </li>
              
                  <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span>
                      Date
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        /date
                      </span>
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        Space
                      </span>
                    </div>
                  </li>
              
                  <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span>
                      Time
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        /date
                      </span>
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        Space
                      </span>
                    </div>
                  </li>
              
                  <li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-line-2 text-foreground">
                    <span>
                      Note box
                    </span>
                    <div class="flex gap-x-1">
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        /note red
                      </span>
                      <span class="min-h-7.5 inline-flex justify-center items-center py-1 px-1.5 bg-layer border border-layer-line font-mono text-sm text-foreground rounded-md">
                        Enter
                      </span>
                    </div>
                  </li>
                </ul>
                
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>

Open related admin dashboard template

Stacked Footers

Compact Footer with Links Pro

Stacked Footer with Utility Links and Shortcuts Pro