Copy left, product image right
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.
.
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>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.