Hero Section
A bold, responsive Hero Section for React and Tailwind with an animated headline, subtext and call-to-action buttons. Copy, paste and ship your landing page in minutes.
New · v2
Ship beautiful UI, faster
Free React & Tailwind components in 40 styles.
Copy the code
export function HeroSection() {
return (
<section className="mx-auto max-w-xl px-6 py-16 text-center text-white">
<span className="rounded-full border border-violet-500/40 bg-violet-500/15 px-3 py-1 text-xs text-violet-300">New · v2</span>
<h1 className="mt-4 text-4xl font-extrabold tracking-tight">Ship beautiful UI, faster</h1>
<p className="mt-3 text-white/60">Free React & Tailwind components in 40 styles.</p>
<div className="mt-6 flex justify-center gap-3">
<button className="rounded-xl bg-violet-600 px-5 py-2.5 font-bold">Get started</button>
<button className="rounded-xl border border-white/15 bg-white/10 px-5 py-2.5 font-bold">Docs</button>
</div>
</section>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the hero section
This hero section is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.