Hero with email capture and trust row
A centered hero section with a headline, an inline signup form, a privacy note and a row of customer logos beneath.
Tailwind CSSHero sectionsherosignuplandingtrust
Live preview
Code
<section class="relative isolate overflow-hidden bg-white px-4 py-20 sm:py-28">
<div aria-hidden="true"
class="absolute inset-x-0 -top-24 -z-10 h-96 bg-gradient-to-b from-indigo-100 via-sky-50 to-transparent"></div>
<div class="mx-auto max-w-3xl text-center">
<p class="mx-auto w-fit rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700">
New: usage reports are live
</p>
<h1 class="mt-6 text-balance text-4xl font-bold tracking-tight text-slate-900 sm:text-6xl">
Ship your product updates in half the time
</h1>
<p class="mx-auto mt-5 max-w-xl text-lg text-slate-600">
Plan, publish and measure releases from one calm workspace your whole team can use.
</p>
<form action="/subscribe" method="post" class="mx-auto mt-8 flex max-w-md flex-col gap-3 sm:flex-row">
<label for="hero-email" class="sr-only">Work email</label>
<input id="hero-email" name="email" type="email" required autocomplete="email"
placeholder="Enter your work email"
class="min-w-0 flex-1 rounded-lg border border-slate-300 px-4 py-3 text-slate-900 focus:border-indigo-600 focus:outline-2 focus:outline-indigo-600">
<button type="submit"
class="rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white hover:bg-indigo-500">
Start free
</button>
</form>
<p class="mt-3 text-xs text-slate-500">Free for 14 days. No card needed. Unsubscribe any time.</p>
<div class="mt-14">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Trusted by teams at</p>
<ul class="mt-4 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-lg font-bold text-slate-400">
<li>Northwind</li>
<li>Acme</li>
<li>Globex</li>
<li>Initech</li>
<li>Umbra</li>
</ul>
</div>
</div>
</section>
How it works
What it solves
Landing pages convert best when the first screen holds a clear promise, one action and a little proof. This hero packs those elements into a compact block that works from phone width up, using nothing but utility classes and one form.
How it works
A gradient wash sits behind the content through an absolutely positioned decorative div marked aria-hidden. The headline uses text-balance so lines break evenly, and the sub copy is capped with max-w-xl for readable measure. The form is a flex column on mobile and a row from sm: up, so the input and button share a baseline on larger screens. The input has a real label (visually hidden), type="email" and autocomplete="email" so browsers can autofill. Below it, a short privacy line and a ul of company names styled as muted wordmarks give social proof without image downloads.
Adapting it
Point the form action at your own endpoint, or intercept the submit event. Replace the wordmark text with logos (use grayscale opacity-60 to keep them quiet). Change the gradient stops to match your palette.
Pitfalls
- Never rely on the placeholder as the only label.
- Keep the form method as
postso a failed script still submits. - Use real customer names only with permission; the fictional ones here are stand-ins.
How to use it
- Paste
hero.htmlwhere your first section should go on a Tailwind 4 page. - Set the form
actionto your signup endpoint and add your own CSRF or token field. - Replace the Acme-style wordmarks in the trust list with approved logos.
- Tune the headline and sub copy; the layout holds for two or more lines.
Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.