Hero Sections

Split hero with screenshot

Copy left, product image right

Live preview

The prompt

Build a split hero with Tailwind CSS. Left column: eyebrow, large headline, paragraph, an email capture input with an inline "Get started" button, and a small "no credit card" note. Right column: a rounded, shadowed screenshot placeholder that bleeds slightly. Two-column on lg, stacked on mobile with the image below the copy.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .

Build a split hero with Tailwind CSS. Left column: eyebrow, large headline, paragraph, an email capture input with an inline "Get started" button, and a small "no credit card" note. Right column: a rounded, shadowed screenshot placeholder that bleeds slightly. Two-column on lg, stacked on mobile with the image below the copy.

<section class="mx-auto grid max-w-6xl items-center gap-12 px-6 py-20 lg:grid-cols-2"> <div> <p class="text-sm font-medium uppercase tracking-wide text-neutral-400">Analytics, simplified</p> <h1 class="mt-3 text-4xl font-semibold tracking-tight text-neutral-900 sm:text-5xl">Know your numbers in seconds</h1> <p class="mt-4 text-lg text-neutral-500">Connect your data and get answers, not dashboards to configure.</p> <form class="mt-6 flex max-w-md items-center gap-2 rounded-xl border border-neutral-200 bg-white p-1.5 shadow-sm"> <input type="email" placeholder="you@company.com" class="flex-1 bg-transparent px-3 py-2 text-sm outline-none" /> <button class="rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800">Get started</button> </form> <p class="mt-2 text-xs text-neutral-400">No credit card required.</p> </div> <div class="relative"> <div class="aspect-[4/3] rounded-2xl bg-neutral-100 shadow-2xl ring-1 ring-neutral-900/5"></div> </div> </section>

The prompt

More hero sections prompts