Tailwind CSS Sticky Layouts Blocks

Sticky Layouts

Sticky page layouts with fixed footers and optional headers for simple landing pages, utility pages, and layout scaffolding.

Page shell with a fixed header, flexible main area, and footer locked to the bottom edge.

<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-navbar border-b border-navbar-line text-sm py-4">
  <nav class="max-w-340 w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
    <div class="flex items-center justify-between">
      <a class="flex-none font-semibold text-xl text-foreground focus:outline-hidden focus:opacity-80" href="#" aria-label="Brand">Brand</a>
      <div class="sm:hidden">
        <button type="button" class="hs-collapse-toggle size-9 flex justify-center items-center text-sm font-semibold rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" id="hs-navbar-sticky-footer-collapse" aria-expanded="false" aria-controls="hs-navbar-sticky-footer" aria-label="Toggle navigation" data-hs-collapse="#hs-navbar-sticky-footer">
          <svg class="hs-collapse-open:hidden 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"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
          <svg class="hs-collapse-open:block hidden 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
      </div>
    </div>
    <div id="hs-navbar-sticky-footer" class="hidden hs-collapse overflow-hidden transition-all duration-300 basis-full grow sm:block" aria-labelledby="hs-navbar-sticky-footer-collapse" role="region">
      <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5">
        <a class="font-medium text-primary focus:outline-hidden" href="#" aria-current="page">Landing</a>
        <a class="font-medium text-navbar-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Account</a>
        <a class="font-medium text-navbar-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Work</a>
        <a class="font-medium text-navbar-nav-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>

<main id="content" class="shrink-0">
  <div class="max-w-340 min-h-160 mx-auto py-10 px-4 sm:px-6 lg:px-8">
    
  </div>
</main>

<footer class="mt-auto py-3 bg-footer-inverse">
  <div class="max-w-340 mx-auto px-4 sm:px-6 lg:px-8">
    <p class="text-foreground-inverse">Place sticky footer content here.</p>
  </div>
</footer>

Page shell with one flexible content area and a footer locked to the bottom edge.

Sticky Layouts

Sticky Layout with Header and Footer Free

Sticky Footer Layout Free