Waitlist hero with social proof

Create a waitlist hero with Tailwind CSS. Centered content on a very light background: a status pill with a small pulsing green dot reading "Launching this spring", a large headline, a short subheading, and a rounded email form with an inline dark "Join the waitlist" button. Below the form, a row of five overlapping circular avatar placeholders with white ring borders, followed by a line of muted text naming how many people are already on the list. Everything stacks and stays centered on mobile.

<section class="bg-neutral-50 px-6 py-28">
  <div class="mx-auto max-w-2xl text-center">
    <span class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-3 py-1 text-sm text-neutral-600 shadow-sm">
      <span class="relative flex h-2 w-2">
        <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
        <span class="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
      </span>
      Launching this spring
    </span>
    <h1 class="mt-6 text-5xl font-semibold tracking-tight text-neutral-900 sm:text-6xl">Your inbox, finally quiet</h1>
    <p class="mx-auto mt-5 max-w-md text-lg text-neutral-500">
      An assistant that triages, drafts, and files — so you only see the twelve emails that matter.
    </p>
    <form class="mx-auto mt-8 flex max-w-md items-center gap-2 rounded-2xl border border-neutral-200 bg-white p-2 shadow-sm">
      <input type="email" placeholder="[email protected]" class="flex-1 bg-transparent px-3 py-2 text-sm outline-none" />
      <button class="shrink-0 rounded-xl bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-neutral-800">Join the waitlist</button>
    </form>
    <div class="mt-8 flex items-center justify-center gap-3">
      <div class="flex -space-x-2">
        <span class="h-8 w-8 rounded-full bg-neutral-300 ring-2 ring-neutral-50"></span>
        <span class="h-8 w-8 rounded-full bg-neutral-400 ring-2 ring-neutral-50"></span>
        <span class="h-8 w-8 rounded-full bg-neutral-300 ring-2 ring-neutral-50"></span>
        <span class="h-8 w-8 rounded-full bg-neutral-400 ring-2 ring-neutral-50"></span>
        <span class="flex h-8 w-8 items-center justify-center rounded-full bg-neutral-900 text-[10px] font-medium text-white ring-2 ring-neutral-50">+9k</span>
      </div>
      <p class="text-sm text-neutral-500">9,214 people ahead of you</p>
    </div>
  </div>
</section>