Split hero with screenshot

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="[email protected]" 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>