Tailwind CSS cookbook · Beginner
Build a hero section with a gradient headline
Create an eye-catching landing-page hero with a large headline, supporting text and two call-to-action buttons.
Approach
Centre the content, use a fluid headline size, and colour part of it with a gradient clipped to the text
(bg-clip-text text-transparent). Balance the heading lines with text-balance.
Solution
<section class="bg-white px-6 py-14 text-center">
<p class="text-sm font-semibold tracking-wide text-indigo-600 uppercase">New in 2026</p>
<h1 class="mx-auto mt-3 max-w-2xl text-4xl font-extrabold tracking-tight text-balance text-slate-900 sm:text-5xl">
Build faster with <span class="bg-linear-to-r from-indigo-600 to-pink-500 bg-clip-text text-transparent">utility-first CSS</span>
</h1>
<p class="mx-auto mt-4 max-w-xl text-lg text-slate-600">Ship beautiful, responsive interfaces without leaving your HTML.</p>
<div class="mt-8 flex flex-wrap justify-center gap-3">
<a href="#" class="rounded-lg bg-indigo-600 px-5 py-3 font-semibold text-white shadow-sm hover:bg-indigo-500">Get started</a>
<a href="#" class="rounded-lg px-5 py-3 font-semibold text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50">Live demo</a>
</div>
</section>
Pitfalls
- Gradient text with low contrast; check the lightest part of the gradient against the background.
- Very long headlines; keep
max-w-2xlso lines stay readable.
Variations
- Add a background pattern with an absolutely positioned decorative element (
aria-hidden="true"). - Split layout:
lg:grid lg:grid-cols-2with an image on the right.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/background-clip