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.

<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.

<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