SolutionsCase StudiesAI ToolsResourcesAboutContact
Get Your Free AI Automation Audit Book a Free 30-Minute Strategy Call
Playground~/frontend Open editor

~/css/tailwind-headers

6 Tailwind Page Headers

6 TailwindPublished 2026-10-05Free · no sign-up

Six headers for the top of a page or section: an app page header with breadcrumbs and actions, a settings header with tabs, a profile header with a cover and avatar, a project header with facts, an announcement bar with a site header and a blog article header.

RelatedCSS LayoutsCSS Hero SectionsCSS FootersCSS TimelinesCSS Blog LayoutsCSS Feature Sections

01. Tailwind Page Header with Actions

TailwindHeaderBreadcrumb

The top of an app page: breadcrumbs, the page title and two action buttons that wrap below the title on narrow screens. flex-wrap with justify-between handles both layouts.

View code 
<header class="w-full max-w-sm">
  <nav aria-label="Breadcrumb"><ol class="flex gap-1.5 text-xs text-slate-600"><li><a href="#products" class="hover:text-slate-900 hover:underline">Products</a></li><li aria-hidden="true">/</li><li aria-current="page" class="text-slate-900">Canvas tote</li></ol></nav>
  <div class="mt-2 flex flex-wrap items-center justify-between gap-3">
    <h3 class="text-2xl font-bold text-slate-900">Canvas tote</h3>
    <div class="flex gap-2"><button type="button" class="rounded-lg bg-white px-3 py-2 text-sm font-semibold text-slate-800 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600">Preview</button><button type="button" class="rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button></div>
  </div>
</header>

02. Tailwind Header with Tabs

TailwindHeaderTabs

A section header with a title and a row of tab links along its bottom border. The current tab is marked with aria-current and an underline that sits on the border, using -mb-px to overlap it.

View code 
<header class="w-full max-w-sm border-b border-slate-300">
  <h3 class="text-xl font-bold text-slate-900">Settings</h3>
  <nav aria-label="Settings sections" class="mt-3 flex gap-5 overflow-x-auto text-sm font-semibold">
    <a href="#general" aria-current="page" class="-mb-px whitespace-nowrap border-b-2 border-indigo-600 pb-2 text-indigo-700">General</a>
    <a href="#team" class="-mb-px whitespace-nowrap border-b-2 border-transparent pb-2 text-slate-600 hover:border-slate-400 hover:text-slate-900">Team</a>
    <a href="#billing" class="-mb-px whitespace-nowrap border-b-2 border-transparent pb-2 text-slate-600 hover:border-slate-400 hover:text-slate-900">Billing</a>
    <a href="#api" class="-mb-px whitespace-nowrap border-b-2 border-transparent pb-2 text-slate-600 hover:border-slate-400 hover:text-slate-900">API</a>
  </nav>
</header>

03. Tailwind Profile Header with Cover

TailwindHeaderProfile

A profile header with a cover banner and an avatar overlapping its lower edge, the overlap made with a negative top margin. The name, handle and Follow button sit beside the avatar and wrap on small screens.

View code 
<header class="w-full max-w-sm overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
  <div aria-hidden="true" class="h-24 bg-gradient-to-r from-amber-300 via-rose-400 to-fuchsia-500"></div>
  <div class="flex flex-wrap items-end gap-3 px-4 pb-4">
    <span aria-hidden="true" class="-mt-8 grid size-16 place-items-center rounded-full bg-indigo-700 text-xl font-bold text-white ring-4 ring-white">NB</span>
    <div class="min-w-0 flex-1"><h3 class="truncate text-lg font-bold text-slate-900">Nadia Brooks</h3><p class="text-sm text-slate-600">@nadiamakes</p></div>
    <button type="button" class="rounded-full bg-slate-900 px-4 py-1.5 text-sm font-semibold text-white hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900">Follow</button>
  </div>
</header>

04. Tailwind Header with Meta Row

TailwindHeaderMeta

A project header with a status badge next to the title and a row of small facts underneath, each with an icon. The facts are a list, separated by gaps that wrap neatly on narrow screens.

View code 
<header class="w-full max-w-sm">
  <div class="flex flex-wrap items-center gap-2"><h3 class="text-xl font-bold text-white">Store redesign</h3><span class="rounded-full bg-emerald-400/15 px-2 py-0.5 text-xs font-semibold text-emerald-300 ring-1 ring-emerald-400/30">Active</span></div>
  <ul class="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-sm text-slate-300">
    <li><span aria-hidden="true">📅</span> Due 18 Nov</li>
    <li><span aria-hidden="true">👥</span> 4 members</li>
    <li><span aria-hidden="true">✅</span> 12 of 20 tasks</li>
  </ul>
</header>

05. Tailwind Announcement Bar and Header

TailwindHeaderBanner

A thin announcement bar above a simple site header with a logo and a button. The bar is a link in its own right and its text truncates instead of breaking the layout on small phones.

View code 
<div class="w-full max-w-sm overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
  <a href="#sale" class="block truncate bg-indigo-700 px-3 py-1.5 text-center text-xs font-semibold text-white hover:bg-indigo-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-white">Autumn sale: 20% off everything until Sunday →</a>
  <header class="flex items-center justify-between px-4 py-3">
    <a href="#home" class="text-lg font-black text-slate-900">Northwind</a>
    <a href="#shop" class="rounded-lg bg-slate-900 px-3 py-1.5 text-sm font-semibold text-white hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900">Shop now</a>
  </header>
</div>

06. Tailwind Article Header

TailwindHeaderArticle

The opening of a blog post: category, a balanced headline, then the author with initials avatar, the date and reading time. The date uses a time element and the separators are hidden from screen readers.

View code 
<header class="w-full max-w-sm">
  <a href="#guides" class="text-xs font-bold uppercase tracking-widest text-rose-700 hover:underline">Guides</a>
  <h3 class="mt-2 text-balance text-2xl font-black leading-tight text-slate-900">How to price handmade products without guessing</h3>
  <div class="mt-4 flex items-center gap-3 text-sm text-slate-600">
    <span aria-hidden="true" class="grid size-9 place-items-center rounded-full bg-teal-700 text-xs font-bold text-white">OL</span>
    <p><span class="font-semibold text-slate-900">Omar Lind</span><br><time datetime="2026-09-30">30 Sep 2026</time> <span aria-hidden="true">·</span> 7 min read</p>
  </div>
</header>

About these Tailwind Page Headers

Wrap, don't squeeze

flex flex-wrap justify-between lets actions drop below the title on narrow screens instead of crushing it.

Overlap with negative margins

An avatar overlapping a cover banner is a negative top margin such as -mt-8 plus a ring in the page colour.

Tabs on the border

Give tab links a 2px bottom border and -mb-px so the active underline sits exactly on the header's border.

Mark the current place

Use aria-current="page" on the current breadcrumb or tab, and style it from that attribute.

Frequently asked questions

Where are site navigation bars?

See the Tailwind responsive navbars and glass navbars collections.

Should the page title be an h1?

Yes on a real page. The demos use h3 because they sit inside this page.

Is there a CSS version?

Yes, see the CSS headers collection.