22 Tailwind CSS Headers
11 / 22

All 22 in 22 Tailwind CSS Headers

  1. 01Tailwind CSS Command Palette Header with ⌘K Shortcut
  2. 02Tailwind Docs Header with Version Switcher and Search
  3. 03Tailwind SaaS App Header with Workspace Switcher
  4. 04Tailwind E-Commerce Header with Cart, Wishlist and Mega Menu
  5. 05Tailwind Marketing Header with Sticky CTA on Scroll
  6. 06Tailwind Article Header with Reading Progress Bar
  7. 07Tailwind Centered Logo Editorial Header
  8. 08Tailwind Transparent Header Over Hero Image
  9. 09Tailwind Header with Breadcrumb Navigation
  10. 10Tailwind Header with Notification Dropdown and User Menu
  11. 11Tailwind Header with GitHub Star Button
  12. 12Tailwind Sticky Header on Scroll with Scroll-Driven Animation
  13. 13Tailwind Mega Menu Header with CSS Grid
  14. 14Tailwind Navbar with Centered Links — Three Column Flexbox
  15. 15Tailwind Full Screen Menu Overlay with Hamburger Toggle
  16. 16Tailwind Glassmorphism Header with Backdrop Blur
  17. 17Tailwind Header with Dismissible Announcement Bar
  18. 18Tailwind Two Row Header with Top Utility Bar
  19. 19Tailwind Navbar Link Hover Effects — 5 Animated Styles
  20. 20Tailwind Sidebar Layout with Collapsible Navigation
  21. 21Tailwind Multi Level Dropdown Menu Header
  22. 22Tailwind Shrinking Header on Scroll
Pure TailwindMIT licensed

Tailwind Header with GitHub Star Button

The header every open-source project ships: wordmark with a version chip, a short docs nav, and a two-part star button linking to the repository. Monochrome with a hard offset shadow — shadow-[4px_4px_0_var(--color-thd11-ink)] — that presses flat on click, and a count in tabular figures so it never nudges the layout.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<div class="thd-11 group/thd11 w-full min-h-svh bg-thd11-bg bg-[radial-gradient(var(--color-thd11-dot)_1px,transparent_1px)] bg-size-[22px_22px] font-thd11-sans text-thd11-ink antialiased">
  <a href="#thd-11-main" class="sr-only focus:not-sr-only focus:absolute focus:left-3 focus:top-3 focus:z-[60] focus:border-2 focus:border-thd11-ink focus:bg-thd11-acc focus:px-4 focus:py-2.5 focus:text-sm focus:font-bold">Skip to content</a>
  <header class="sticky top-0 z-40 border-b-2 border-thd11-ink bg-thd11-bg">
    <div class="mx-auto flex h-16 max-w-6xl items-center gap-3 px-[clamp(.75rem,3vw,1.5rem)]">
      <a href="#thd-11-main" class="flex items-baseline gap-1 font-thd11-mono text-lg font-bold tracking-tight">stackless<span class="text-thd11-mut">/ui</span></a>
      <span class="hidden border-2 border-thd11-ink bg-thd11-acc px-1.5 font-thd11-mono text-[11px] font-bold sm:inline">v2.0</span>
      <nav aria-label="Main" class="ml-4 hidden md:block">
        <ul class="flex items-center gap-1 text-[15px] font-medium">
          <li><a href="#thd-11-main" aria-current="page" class="border-2 border-transparent px-2.5 py-1.5 hover:border-thd11-ink aria-[current=page]:border-thd11-ink aria-[current=page]:bg-thd11-ink aria-[current=page]:text-thd11-bg">Docs</a></li>
          <li><a href="#thd-11-main" class="border-2 border-transparent px-2.5 py-1.5 hover:border-thd11-ink">Components</a></li>
          <li><a href="#thd-11-main" class="border-2 border-transparent px-2.5 py-1.5 hover:border-thd11-ink">Themes</a></li>
          <li><a href="#thd-11-main" class="border-2 border-transparent px-2.5 py-1.5 hover:border-thd11-ink">Blog</a></li>
        </ul>
      </nav>
      <div class="ml-auto flex items-center gap-2">
        <input id="thd-11-t" type="checkbox" class="peer/t sr-only">
        <label for="thd-11-t" class="grid size-11 cursor-pointer place-items-center border-2 border-transparent hover:border-thd11-ink peer-focus-visible/t:outline-2 peer-focus-visible/t:outline-offset-2 peer-focus-visible/t:outline-thd11-ink">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true" class="size-[18px] group-has-[#thd-11-t:checked]/thd11:hidden"><path d="M20.5 14.4A8.4 8.4 0 0 1 9.6 3.5a8.6 8.6 0 1 0 10.9 10.9Z"/></svg>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" class="hidden size-[18px] group-has-[#thd-11-t:checked]/thd11:block"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.8v2.1M12 19.1v2.1M2.8 12h2.1M19.1 12h2.1M5.5 5.5 7 7M17 17l1.5 1.5M18.5 5.5 17 7M7 17l-1.5 1.5"/></svg>
          <span class="sr-only">Switch light or dark theme</span>
        </label>
        <a href="#thd-11-main" class="hidden px-2 py-2 font-thd11-mono text-sm underline decoration-2 underline-offset-4 hover:bg-thd11-acc sm:block">Changelog</a>
        <a href="#thd-11-main" aria-label="Star stackless on GitHub, 12,400 stars" class="group/star flex min-h-11 items-stretch divide-x-2 divide-thd11-ink border-2 border-thd11-ink bg-thd11-bg font-thd11-mono text-sm font-bold shadow-[4px_4px_0_var(--color-thd11-ink)] transition-[translate,box-shadow] duration-100 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thd11-ink active:translate-x-1 active:translate-y-1 active:shadow-none">
          <span aria-hidden="true" class="flex items-center gap-2 px-3 transition-colors group-hover/star:bg-thd11-ink group-hover/star:text-thd11-bg group-focus-visible/star:bg-thd11-ink group-focus-visible/star:text-thd11-bg"><svg viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M12 .5C5.7.5.5 5.7.5 12a11.5 11.5 0 0 0 7.9 10.9c.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.9 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.5 11.5 0 0 0 23.5 12C23.5 5.7 18.3.5 12 .5Z"/></svg><span class="hidden sm:inline">Star</span></span>
          <span aria-hidden="true" class="flex items-center gap-1.5 bg-thd11-acc px-3 tabular-nums text-black"><svg viewBox="0 0 24 24" fill="currentColor" class="size-3.5"><path d="m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9L12 3.5Z"/></svg>12.4k</span>
        </a>
      </div>
    </div>
  </header>
  <main id="thd-11-main" class="mx-auto max-w-6xl px-[clamp(.75rem,3vw,1.5rem)] py-[clamp(3rem,9vw,6rem)]">
    <p class="inline-block border-2 border-thd11-ink bg-thd11-acc px-2 py-0.5 font-thd11-mono text-xs font-bold text-black">MIT &middot; 0 deps</p>
    <h1 class="mt-4 max-w-[18ch] text-[clamp(2.4rem,7vw,4.6rem)] font-bold leading-[.95] tracking-[-.04em] text-balance">Headless components, no runtime.</h1>
    <p class="mt-5 max-w-[50ch] text-lg text-thd11-mut">Click the star button &mdash; it presses flat into the page. The count uses tabular figures, so 12.4k&rarr;12.5k never shifts the bar.</p>
    <pre class="mt-8 inline-block border-2 border-thd11-ink bg-thd11-bg px-4 py-3 font-thd11-mono text-sm shadow-[4px_4px_0_var(--color-thd11-ink)]"><code>npm i @stackless/ui</code></pre>
    <div aria-hidden="true" class="h-[60svh]"></div>
  </main>
</div>
@import "tailwindcss";

@theme inline {
  --color-thd11-bg: var(--thd11-bg);
  --color-thd11-ink: var(--thd11-ink);
  --color-thd11-mut: var(--thd11-mut);
  --color-thd11-dot: var(--thd11-dot);
  --color-thd11-acc: var(--thd11-acc);
}

@theme {
  --font-thd11-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-thd11-mono: 'Space Mono', ui-monospace, monospace;
}

.thd-11 {
  width: 100%;
  min-height: 100svh;
  --thd11-bg: #fafaf7;
  --thd11-ink: #0d0d0d;
  --thd11-mut: #4a4a48;
  --thd11-dot: rgb(13 13 13 / 0.12);
  --thd11-acc: #d4ff3f;
}

.thd-11:has(#thd-11-t:checked) {
  --thd11-bg: #0d0d0d;
  --thd11-ink: #f2f2ee;
  --thd11-mut: #b0b0aa;
  --thd11-dot: rgb(242 242 238 / 0.1);
  --thd11-acc: #d4ff3f;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme inline {
  --color-thd11-bg: var(--thd11-bg);
  --color-thd11-ink: var(--thd11-ink);
  --color-thd11-mut: var(--thd11-mut);
  --color-thd11-dot: var(--thd11-dot);
  --color-thd11-acc: var(--thd11-acc);
}

@theme {
  --font-thd11-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-thd11-mono: 'Space Mono', ui-monospace, monospace;
}

.thd-11 {
  width: 100%;
  min-height: 100svh;
  --thd11-bg: #fafaf7;
  --thd11-ink: #0d0d0d;
  --thd11-mut: #4a4a48;
  --thd11-dot: rgb(13 13 13 / 0.12);
  --thd11-acc: #d4ff3f;
}

.thd-11:has(#thd-11-t:checked) {
  --thd11-bg: #0d0d0d;
  --thd11-ink: #f2f2ee;
  --thd11-mut: #b0b0aa;
  --thd11-dot: rgb(242 242 238 / 0.1);
  --thd11-acc: #d4ff3f;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&family=Space+Mono:wght@400;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • .hd-11__star:hover, :focus-visible and :active became three variant groups on one element — the full interaction reads in one class list.
  • The dotted ground is one arbitrary radial gradient plus v4's bg-size-[…] utility.
  • UI upgrade from the CSS original: the star button is now two-part (label + count) and physically presses flat on click, with a neon count cell for scan-ability.
  • UI upgrade: a version chip next to the wordmark, a bordered active nav state, and a hard-shadow install snippet echoing the button.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Header with GitHub Star Button
Source: https://codefronts.com/layouts/tailwind-css-headers/tailwind-header-github-star-button/

The header every open-source project ships: wordmark with a version chip, a short docs nav, and a two-part star button linking to the repository. Monochrome with a hard offset shadow — shadow-[4px_4px_0_var(--color-thd11-ink)] — that presses flat on click, and a count in tabular figures so it never nudges the layout.
## HTML
```html
<div class="thd-11 group/thd11 w-full min-h-svh bg-thd11-bg bg-[radial-gradient(var(--color-thd11-dot)_1px,transparent_1px)] bg-size-[22px_22px] font-thd11-sans text-thd11-ink antialiased">
  <a href="#thd-11-main" class="sr-only focus:not-sr-only focus:absolute focus:left-3 focus:top-3 focus:z-[60] focus:border-2 focus:border-thd11-ink focus:bg-thd11-acc focus:px-4 focus:py-2.5 focus:text-sm focus:font-bold">Skip to content</a>
  <header class="sticky top-0 z-40 border-b-2 border-thd11-ink bg-thd11-bg">
    <div class="mx-auto flex h-16 max-w-6xl items-center gap-3 px-[clamp(.75rem,3vw,1.5rem)]">
      <a href="#thd-11-main" class="flex items-baseline gap-1 font-thd11-mono text-lg font-bold tracking-tight">stackless<span class="text-thd11-mut">/ui</span></a>
      <span class="hidden border-2 border-thd11-ink bg-thd11-acc px-1.5 font-thd11-mono text-[11px] font-bold sm:inline">v2.0</span>
      <nav aria-label="Main" class="ml-4 hidden md:block">
        <ul class="flex items-center gap-1 text-[15px] font-medium">
          <li><a href="#thd-11-main" aria-current="page" class="border-2 border-transparent px-2.5 py-1.5 hover:border-thd11-ink aria-[current=page]:border-thd11-ink aria-[current=page]:bg-thd11-ink aria-[current=page]:text-thd11-bg">Docs</a></li>
          <li><a href="#thd-11-main" class="border-2 border-transparent px-2.5 py-1.5 hover:border-thd11-ink">Components</a></li>
          <li><a href="#thd-11-main" class="border-2 border-transparent px-2.5 py-1.5 hover:border-thd11-ink">Themes</a></li>
          <li><a href="#thd-11-main" class="border-2 border-transparent px-2.5 py-1.5 hover:border-thd11-ink">Blog</a></li>
        </ul>
      </nav>
      <div class="ml-auto flex items-center gap-2">
        <input id="thd-11-t" type="checkbox" class="peer/t sr-only">
        <label for="thd-11-t" class="grid size-11 cursor-pointer place-items-center border-2 border-transparent hover:border-thd11-ink peer-focus-visible/t:outline-2 peer-focus-visible/t:outline-offset-2 peer-focus-visible/t:outline-thd11-ink">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true" class="size-[18px] group-has-[#thd-11-t:checked]/thd11:hidden"><path d="M20.5 14.4A8.4 8.4 0 0 1 9.6 3.5a8.6 8.6 0 1 0 10.9 10.9Z"/></svg>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" class="hidden size-[18px] group-has-[#thd-11-t:checked]/thd11:block"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.8v2.1M12 19.1v2.1M2.8 12h2.1M19.1 12h2.1M5.5 5.5 7 7M17 17l1.5 1.5M18.5 5.5 17 7M7 17l-1.5 1.5"/></svg>
          <span class="sr-only">Switch light or dark theme</span>
        </label>
        <a href="#thd-11-main" class="hidden px-2 py-2 font-thd11-mono text-sm underline decoration-2 underline-offset-4 hover:bg-thd11-acc sm:block">Changelog</a>
        <a href="#thd-11-main" aria-label="Star stackless on GitHub, 12,400 stars" class="group/star flex min-h-11 items-stretch divide-x-2 divide-thd11-ink border-2 border-thd11-ink bg-thd11-bg font-thd11-mono text-sm font-bold shadow-[4px_4px_0_var(--color-thd11-ink)] transition-[translate,box-shadow] duration-100 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thd11-ink active:translate-x-1 active:translate-y-1 active:shadow-none">
          <span aria-hidden="true" class="flex items-center gap-2 px-3 transition-colors group-hover/star:bg-thd11-ink group-hover/star:text-thd11-bg group-focus-visible/star:bg-thd11-ink group-focus-visible/star:text-thd11-bg"><svg viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M12 .5C5.7.5.5 5.7.5 12a11.5 11.5 0 0 0 7.9 10.9c.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.9 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.5 11.5 0 0 0 23.5 12C23.5 5.7 18.3.5 12 .5Z"/></svg><span class="hidden sm:inline">Star</span></span>
          <span aria-hidden="true" class="flex items-center gap-1.5 bg-thd11-acc px-3 tabular-nums text-black"><svg viewBox="0 0 24 24" fill="currentColor" class="size-3.5"><path d="m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9L12 3.5Z"/></svg>12.4k</span>
        </a>
      </div>
    </div>
  </header>
  <main id="thd-11-main" class="mx-auto max-w-6xl px-[clamp(.75rem,3vw,1.5rem)] py-[clamp(3rem,9vw,6rem)]">
    <p class="inline-block border-2 border-thd11-ink bg-thd11-acc px-2 py-0.5 font-thd11-mono text-xs font-bold text-black">MIT &middot; 0 deps</p>
    <h1 class="mt-4 max-w-[18ch] text-[clamp(2.4rem,7vw,4.6rem)] font-bold leading-[.95] tracking-[-.04em] text-balance">Headless components, no runtime.</h1>
    <p class="mt-5 max-w-[50ch] text-lg text-thd11-mut">Click the star button &mdash; it presses flat into the page. The count uses tabular figures, so 12.4k&rarr;12.5k never shifts the bar.</p>
    <pre class="mt-8 inline-block border-2 border-thd11-ink bg-thd11-bg px-4 py-3 font-thd11-mono text-sm shadow-[4px_4px_0_var(--color-thd11-ink)]"><code>npm i @stackless/ui</code></pre>
    <div aria-hidden="true" class="h-[60svh]"></div>
  </main>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme inline {
  --color-thd11-bg: var(--thd11-bg);
  --color-thd11-ink: var(--thd11-ink);
  --color-thd11-mut: var(--thd11-mut);
  --color-thd11-dot: var(--thd11-dot);
  --color-thd11-acc: var(--thd11-acc);
}

@theme {
  --font-thd11-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-thd11-mono: 'Space Mono', ui-monospace, monospace;
}

.thd-11 {
  width: 100%;
  min-height: 100svh;
  --thd11-bg: #fafaf7;
  --thd11-ink: #0d0d0d;
  --thd11-mut: #4a4a48;
  --thd11-dot: rgb(13 13 13 / 0.12);
  --thd11-acc: #d4ff3f;
}

.thd-11:has(#thd-11-t:checked) {
  --thd11-bg: #0d0d0d;
  --thd11-ink: #f2f2ee;
  --thd11-mut: #b0b0aa;
  --thd11-dot: rgb(242 242 238 / 0.1);
  --thd11-acc: #d4ff3f;
}
```

How this works

A physical button. At rest the pill sits on a 4px solid offset shadow; active: translates it by exactly 4px and drops the shadow, so it reads as pressed into the page. Hover inverts the label half to ink, leaving the count legible.

Numbers that don't jiggle. tabular-nums gives every digit the same advance width, so 12.4k → 12.5k never shifts the nav.

Make it yours

  • Live count: fetch stargazers_count from the GitHub API at build time and format with Intl.NumberFormat('en', { notation: 'compact' }).
  • Softer: swap the hard shadow for shadow-md and add rounded-full.
  • Accent pop: set --thd11-acc for the version chip and hover states.

Gotchas — read before shipping

  • The star link's accessible name must say what it does: aria-label="Star stackless on GitHub, 12,400 stars".
  • Hard shadows need overflow: visible on parents — don't clip the header row.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Baseline at Tailwind v4's floor.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗transitionstw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →