Tailwind CSS Hero Section Examples
Landing-page hero sections with a headline, supporting copy and calls to action — centered, split with a visual, or with an email signup form.
3 components · live preview · copy as HTML or JSX · free for commercial use
3 hero sections to copy
Centered Hero
Hero Sections
Version 2.0 is live
Build beautiful pages in minutes
Copy-paste components, sensible defaults and zero lock-in. Go from idea to launch without fighting your CSS.
Change the <h2> to <h1> when the hero is the first heading on your page.
<section class="w-full bg-white px-4 py-16 sm:py-24">
<div class="mx-auto max-w-3xl text-center">
<p class="mb-5 inline-flex items-center gap-2 rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700">
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500"></span>
Version 2.0 is live
</p>
<h2 class="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl">
Build beautiful pages
<span class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">in minutes</span>
</h2>
<p class="mx-auto mt-5 max-w-xl text-base text-slate-600 sm:text-lg">Copy-paste components, sensible defaults and zero lock-in. Go from idea to launch without fighting your CSS.</p>
<div class="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
<a href="#" class="rounded-xl bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700">Get started free</a>
<a href="#" class="rounded-xl border border-slate-300 px-6 py-3 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50">View demo</a>
</div>
</div>
</section>Split Hero with Image
Hero Sections
Analytics for small teams
Know what works. Drop what doesn't.
Privacy-friendly dashboards that answer real questions in seconds — no SQL and no sampling.
Free for 14 days · No credit card required
The chart panel is a decorative placeholder — swap it for an <img> with width, height and alt text. Change <h2> to <h1> if it opens the page.
<section class="w-full bg-slate-50 px-4 py-14">
<div class="mx-auto grid max-w-6xl items-center gap-10 md:grid-cols-2">
<div>
<p class="text-sm font-semibold uppercase tracking-wide text-indigo-600">Analytics for small teams</p>
<h2 class="mt-3 text-4xl font-extrabold tracking-tight text-slate-900">Know what works. Drop what doesn't.</h2>
<p class="mt-4 text-base text-slate-600">Privacy-friendly dashboards that answer real questions in seconds — no SQL and no sampling.</p>
<div class="mt-7 flex flex-wrap items-center gap-4">
<a href="#" class="rounded-xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-slate-700">Start free trial</a>
<a href="#" class="text-sm font-semibold text-slate-700 hover:text-indigo-600">See how it works →</a>
</div>
<p class="mt-6 text-xs text-slate-500">Free for 14 days · No credit card required</p>
</div>
<div aria-hidden="true" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-xl">
<div class="flex gap-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-rose-400"></span>
<span class="h-2.5 w-2.5 rounded-full bg-amber-400"></span>
<span class="h-2.5 w-2.5 rounded-full bg-emerald-400"></span>
</div>
<div class="mt-5 flex h-40 items-end gap-2">
<div class="h-1/3 flex-1 rounded-t-md bg-indigo-200"></div>
<div class="h-1/2 flex-1 rounded-t-md bg-indigo-300"></div>
<div class="h-2/5 flex-1 rounded-t-md bg-indigo-200"></div>
<div class="h-3/4 flex-1 rounded-t-md bg-indigo-400"></div>
<div class="h-2/3 flex-1 rounded-t-md bg-indigo-300"></div>
<div class="h-full flex-1 rounded-t-md bg-indigo-600"></div>
</div>
</div>
</div>
</section>Hero with Email Signup
Hero Sections
Ship your side project this weekend
Weekly tutorials, starter kits and launch checklists for indie developers.
Joined by 12,000+ developers
Change the <h2> to <h1> when the hero is the first heading on your page.
<section class="w-full bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 px-4 py-16 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl">Ship your side project this weekend</h2>
<p class="mt-4 text-base text-indigo-100 sm:text-lg">Weekly tutorials, starter kits and launch checklists for indie developers.</p>
<form action="#" class="mx-auto mt-8 flex max-w-md flex-col gap-3 sm:flex-row">
<label for="hero-email" class="sr-only">Email address</label>
<input id="hero-email" type="email" required placeholder="Enter your email" class="min-w-0 flex-1 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm text-white placeholder:text-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-400" />
<button type="submit" class="rounded-xl bg-indigo-500 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-indigo-400">Join free</button>
</form>
<div class="mt-6 flex items-center justify-center gap-3">
<div class="flex -space-x-2" aria-hidden="true">
<span class="h-7 w-7 rounded-full border-2 border-slate-900 bg-amber-400"></span>
<span class="h-7 w-7 rounded-full border-2 border-slate-900 bg-emerald-400"></span>
<span class="h-7 w-7 rounded-full border-2 border-slate-900 bg-sky-400"></span>
</div>
<p class="text-sm text-indigo-100">Joined by 12,000+ developers</p>
</div>
</div>
</section>Anatomy of a hero that converts
A hero section has a few seconds to answer what this is, who it is for and what to do next. Keep the headline to one idea (text-4xl to text-5xl on desktop), follow it with one or two sentences of supporting copy, and offer one primary action with an optional secondary one. Small extras such as an announcement pill, a no-credit-card note or an avatar row of happy users add trust without adding clutter.
Pick the layout for your content: the centered hero suits short, bold messages; the split hero places copy beside a product screenshot (stacking on mobile with md:grid-cols-2); and the signup hero puts the email form directly in the hero for newsletters and waitlists.
Performance and accessibility
The hero is usually the Largest Contentful Paint element, so give hero images explicit width and height, avoid lazy-loading them and keep background gradients in CSS rather than large image files. The snippets use <h2> so they drop safely into any page — change it to <h1> when the hero opens the page, and keep exactly one <h1> per page. Check text contrast on gradient and image backgrounds at every point, not just the average color.
Frequently Asked Questions
How do I make a full-screen hero section in Tailwind?↓
Add min-h-screen (or min-h-dvh on mobile browsers) to the section, then center the content with flex flex-col justify-center. Account for a sticky header by subtracting its height if needed.
Should the hero headline be an h1?↓
Yes, when the hero is the top of the page its headline should be the page's single <h1>. The examples use <h2> only so they can be dropped anywhere without creating a second <h1>.
How do I create gradient text in a hero?↓
Wrap the words in a span with bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent, as the Centered Hero does. Keep a solid fallback color in mind for high-contrast modes.
Last updated: