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.

Create a responsive UI block named "Sticky Layout with Header and Footer" 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/sticky-layouts/#sticky-footer-header. 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/sticky-layouts
- Block ID: sticky-footer-header
- Source description: Page shell with a fixed header, flexible main area, and footer locked to the bottom edge.
- Preview iframe: https://preline.co/blocks/navigation-layout/sticky-layouts/iframes/free/sticky-footer-header.html (repo path: blocks/navigation-layout/sticky-layouts/iframes/free/sticky-footer-header.html)
- Source markup reference:
  - partials/blocks/sources/pages/sticky-footer-header.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):
  - Three page regions in order: a `<header>` navbar, `<main id="content" class="shrink-0">` whose inner `max-w-340 min-h-160 mx-auto py-10 px-4 sm:px-6 lg:px-8` div is intentionally empty (only a `your content goes here ...` comment), and a `<footer class="mt-auto py-3 bg-footer-inverse">` whose single line of copy is `Place sticky footer content here.` in inverse text.
  - The brand link reads `Brand` (`font-semibold text-xl`, `aria-label="Brand"`) and the nav has exactly 4 links in order: `Landing`, `Account`, `Work`, `Blog`.
  - `Landing` is the current page: it carries `aria-current="page"` and primary-colored text; the other three are muted with primary hover/focus.
  - The mobile menu uses Preline HSCollapse, not a dropdown: button `id="hs-navbar-sticky-footer-collapse"` with `data-hs-collapse="#hs-navbar-sticky-footer"`, `aria-expanded="false"`, and a hamburger/close icon pair swapped by `hs-collapse-open:hidden` / `hs-collapse-open:block`; the panel `id="hs-navbar-sticky-footer"` is `hidden hs-collapse ... sm:block`, so it is collapsed on small screens and always open from `sm` up.
  - Header is `w-full bg-navbar border-b border-navbar-line text-sm py-4` with an inner `max-w-340 w-full mx-auto px-4 sm:px-6 lg:px-8` nav; header, main, and footer all share the `max-w-340` container width.
  - The sticky-to-bottom effect comes purely from layout classes (`min-h-full` on the root, `shrink-0` on main, `mt-auto` on the footer) - there is no scroll listener, no `position: fixed`, and no JS beyond the collapse plugin.

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.

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

Create a responsive UI block named "Sticky Footer Layout" 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/sticky-layouts/#sticky-footer. 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/sticky-layouts
- Block ID: sticky-footer
- Source description: Page shell with one flexible content area and a footer locked to the bottom edge.
- Preview iframe: https://preline.co/blocks/navigation-layout/sticky-layouts/iframes/free/sticky-footer.html (repo path: blocks/navigation-layout/sticky-layouts/iframes/free/sticky-footer.html)
- Source markup reference:
  - partials/blocks/sources/pages/sticky-footer.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):
  - Only two regions exist: `<main id="content" class="shrink-0">` and `<footer class="mt-auto py-3 bg-footer-inverse">`; there is no header, navbar, brand, or link list in this block - do not add one.
  - The main region's inner div is `max-w-340 min-h-160 mx-auto py-10 px-4 sm:px-6 lg:px-8` and is deliberately empty, holding only a `your content goes here ...` comment as the slot for page content.
  - The footer holds exactly one paragraph whose full copy is `Place sticky footer content here.`, rendered in inverse foreground text on the inverse footer surface.
  - The footer's inner wrapper repeats the main container geometry: `max-w-340 mx-auto px-4 sm:px-6 lg:px-8`.
  - The root element carries `class="relative min-h-full"`; the footer pins to the bottom purely through `min-h-full` + `shrink-0` + `mt-auto`, never through `position: fixed` or `sticky`.
  - Fully static: no Preline JS plugins, no buttons, no icons, no toggles, and no hover or active states anywhere in the block.

Sticky Layouts

Sticky Layout with Header and Footer Free

Sticky Footer Layout Free