COMPONENTS · SECTIONS

Tailwind Header Components & Sections

Kick-off every page with responsive Tailwind headers. Branding, nav and utility actions combined in one accessible top-bar.

7 sections2 freeTailwind CSS v4HTML · React · MCP

Pick sectionsTailkits UI

FREE HEADER SECTIONS · COPY AND PASTE

All free sections

Header: Headline with Email Signup

Header featuring SaaS tagline, subtext, email field, and CTA button.

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-header-2.json
View HTML code
<section
  class="pt-12 lg:pt-16 bg-gradient-to-b from-tk-tint-7 via-tk-tint-8 to-background"
>
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col items-center"
    data-tk-motion="enter blur"
  >
    <div
      class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
    >
      Introducing saaslandings
    </div>
    <h1
      class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-8 text-center sm:mx-auto sm:w-2/3 md:w-3/4 lg:mt-9 lg:leading-tight xl:w-3/5"
    >
      Elevate Your SaaS Design Game
    </h1>
    <p
      class="text-sm font-medium text-tk-ink-soft leading-normal lg:leading-normal lg:text-base mt-4 text-center sm:mx-auto sm:w-2/3 md:w-1/2 xl:w-2/5"
    >
      Discover a treasure trove of design resources to enhance your projects and
      capture your audience&#39;s attention
    </p>
    <form
      class="mt-8 flex w-full flex-col gap-y-2 sm:mx-auto sm:w-1/2 md:w-2/5 lg:mt-9 lg:flex-row lg:items-center lg:gap-x-4 lg:gap-y-0"
    >
      <div class="flex w-full flex-col">
        <label for="email" class="sr-only">Email address</label>
        <div
          class="group relative rounded-tk-xl border border-input bg-background transition hover:bg-muted"
        >
          <input
            id="email"
            name="email"
            type="email"
            class="font-medium w-full rounded-tk-xl bg-transparent shadow-tk-sm text-sm placeholder:font-medium placeholder:text-sm text-card-foreground focus-visible:outline-none focus:shadow-tk-focus pl-10 pr-9 py-3 placeholder:text-tk-text-placeholder"
            autocomplete="email"
            placeholder="Enter your email"
          />
          <svg
            class="absolute top-1/2 -translate-y-1/2 left-0 flex h-5 items-center text-muted-foreground transition group-hover:text-tk-text-faint group-focus:text-muted-foreground ml-3"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z"
            />
            <path
              d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z"
            />
          </svg>
        </div>
      </div>
      <button
        type="submit"
        class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-5 py-3 rounded-tk-xl flex"
        data-tk-hover="press"
      >
        Get started
        <svg
          class="shrink-0 ml-3 h-5"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    </form>
  </div>
</section>

Header: Bold Headline with Dual CTAs

Hero header with bold SaaS headline, subtext and dual CTA buttons

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-header-1.json
View HTML code
<section class="pt-12 lg:pt-16">
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col items-center"
    data-tk-motion="enter blur"
  >
    <div
      class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
    >
      Introducing saaslandings
    </div>
    <h1
      class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-6 text-center sm:mx-auto sm:w-1/2 md:mt-8 md:w-2/5 lg:w-1/2 lg:leading-tight xl:mt-9 xl:w-2/5"
    >
      Design Resources for SaaS Success
    </h1>
    <p
      class="text-sm font-medium text-tk-ink-soft leading-normal lg:leading-normal lg:text-base mt-4 text-center sm:mx-auto sm:w-2/3 md:w-1/2 xl:w-2/5"
    >
      Unlock the power of stunning design for your SaaS projects and create a
      memorable user experience that drives growth and customer satisfaction
    </p>
    <div
      class="mt-6 flex flex-wrap items-center justify-center gap-3 md:mt-8 xl:mt-9"
    >
      <a
        href="/features"
        title="All features"
        class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-4 py-2.5 rounded-tk flex"
        data-tk-hover="press"
      >
        <svg
          class="shrink-0 text-muted-foreground mr-2 h-4"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
            clip-rule="evenodd"
          />
        </svg>
        All features
      </a>
      <a
        href="/sign-up"
        title="Try free"
        class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-4 py-2.5 rounded-tk flex"
        data-tk-hover="press"
      >
        Try free
        <span class="ml-1 text-tk-primary-foreground-faint"> - 14 days</span>
        <svg
          class="shrink-0 ml-2 h-4"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
        </svg>
      </a>
    </div>
  </div>
</section>

5 MORE HEADER SECTIONS IN TAILKITS UI

See plans

HEADER SECTIONS FROM OTHER LIBRARIES

All component libraries

Third-party libraries in the Tailkits directory that include header sections. Reviewed by the editors; sponsored listings are marked.

Myna UI

Free

TailwindCSS and shadcn/ui UI kit

Pagedone

Free

500+ Tailwind components with Figma file

MORE TAILWIND SECTIONS

Hero 31Features 23How It Works 20Testimonial 13Footer 12Pricing 10Call to Action 9Navbar 9Newsletter 9Blog 7Contact 7FAQ 7Logo Cloud 7Team 7Sign In 6Sign Up 6Stats 6Waitlist 6Announcement Bar 5Comparison 5Integrations 5Launch 5Roadmap 5Blog Content 3Launch Badges 3Bento Grid 2Coming Soon 2
GOOD TO KNOW

Frequently asked questions

Answers to common questions about Tailwind header components.

Are these Tailwind header sections free?

2 of the 7 header sections on this page are free (Headline with Email Signup, Bold Headline with Dual CTAs): copy the HTML above, no account needed. The other 5 are part of Tailkits UI, the paid library; each shows a preview here and unlocks its code with a Tailkits UI plan.

Which Tailwind CSS version do the header components use?

Tailwind CSS v4. The code is plain HTML with utility classes; colours, radii and shadows read CSS variables named like shadcn/ui's (bg-primary, text-muted-foreground), so a shadcn theme or a DESIGN.md export reskins every section. Add tailkits-theme.css next to the code for the default look.

Can I use these header sections in React or Next.js?

Yes. Every section is also a React component in the @tailkits shadcn registry. Free sections install without an account, for example: npx shadcn@latest add https://tailkits.com/r/free-<name>.json. Paid sections install with the token from your Tailkits UI account.

Can an AI coding assistant add a header section for me?

Yes. The Tailkits MCP at tailkits.com/mcp is free and open, with no account: Claude Code, Cursor and other MCP clients can search the header sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind header components?

The directory lists 3 third-party libraries with header sections, including , , . They are shown below our own sections, with their pricing and stack.