Milestone counters timeline

Create a milestone timeline with Tailwind CSS laid out horizontally on large screens and vertically below md. Draw a hairline running through the middle with five nodes on it: each node is a small circle, filled dark for the past and outlined for the current year, with a card above or below alternating position. Every card is bordered and rounded-xl and contains a monospaced year, a large figure, a metric label, and one line of context. Use figures like first hundred customers, one million events a day, a Series A, ten thousand teams and one billion decisions. Give the most recent card a neutral-900 background with inverted text. Below the timeline, a summary strip of three cells separated by vertical rules showing years operating, total customers and people employed, each with a large figure and a muted label.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="max-w-xl">
    <h2 class="text-3xl font-semibold tracking-tight text-neutral-900">Six years, five numbers we remember</h2>
    <p class="mt-3 text-neutral-500">Everything else is in the annual letters.</p>
  </div>

  <div class="relative mt-14">
    <div class="absolute left-4 top-0 h-full w-px bg-neutral-200 md:left-0 md:top-1/2 md:h-px md:w-full"></div>

    <div class="relative grid gap-8 md:grid-cols-5 md:gap-4">
      <div class="relative pl-12 md:pb-24 md:pl-0">
        <span class="absolute left-[9px] top-2 h-3 w-3 rounded-full bg-neutral-900 ring-4 ring-white md:left-1/2 md:top-auto md:bottom-[-6px] md:-translate-x-1/2"></span>
        <div class="rounded-xl border border-neutral-200 bg-white p-5">
          <p class="font-mono text-xs text-neutral-400">2020</p>
          <p class="mt-2 text-2xl font-semibold tracking-tight text-neutral-900">100</p>
          <p class="text-sm font-medium text-neutral-900">First customers</p>
          <p class="mt-1.5 text-xs leading-relaxed text-neutral-500">Two founders, one region, and a support inbox they both answered.</p>
        </div>
      </div>

      <div class="relative pl-12 md:pl-0 md:pt-24">
        <span class="absolute left-[9px] top-2 h-3 w-3 rounded-full bg-neutral-900 ring-4 ring-white md:left-1/2 md:top-[-6px] md:-translate-x-1/2"></span>
        <div class="rounded-xl border border-neutral-200 bg-white p-5">
          <p class="font-mono text-xs text-neutral-400">2022</p>
          <p class="mt-2 text-2xl font-semibold tracking-tight text-neutral-900">1M</p>
          <p class="text-sm font-medium text-neutral-900">Events a day</p>
          <p class="mt-1.5 text-xs leading-relaxed text-neutral-500">The month we stopped running everything on a single database.</p>
        </div>
      </div>

      <div class="relative pl-12 md:pb-24 md:pl-0">
        <span class="absolute left-[9px] top-2 h-3 w-3 rounded-full bg-neutral-900 ring-4 ring-white md:left-1/2 md:bottom-[-6px] md:top-auto md:-translate-x-1/2"></span>
        <div class="rounded-xl border border-neutral-200 bg-white p-5">
          <p class="font-mono text-xs text-neutral-400">2023</p>
          <p class="mt-2 text-2xl font-semibold tracking-tight text-neutral-900">$14M</p>
          <p class="text-sm font-medium text-neutral-900">Series A</p>
          <p class="mt-1.5 text-xs leading-relaxed text-neutral-500">Raised to hire engineers, not to buy growth.</p>
        </div>
      </div>

      <div class="relative pl-12 md:pl-0 md:pt-24">
        <span class="absolute left-[9px] top-2 h-3 w-3 rounded-full bg-neutral-900 ring-4 ring-white md:left-1/2 md:top-[-6px] md:-translate-x-1/2"></span>
        <div class="rounded-xl border border-neutral-200 bg-white p-5">
          <p class="font-mono text-xs text-neutral-400">2024</p>
          <p class="mt-2 text-2xl font-semibold tracking-tight text-neutral-900">10k</p>
          <p class="text-sm font-medium text-neutral-900">Teams onboard</p>
          <p class="mt-1.5 text-xs leading-relaxed text-neutral-500">Self-serve overtook sales-led signups for the first time.</p>
        </div>
      </div>

      <div class="relative pl-12 md:pb-24 md:pl-0">
        <span class="absolute left-[9px] top-2 h-3 w-3 rounded-full border-2 border-neutral-900 bg-white ring-4 ring-white md:left-1/2 md:bottom-[-6px] md:top-auto md:-translate-x-1/2"></span>
        <div class="rounded-xl bg-neutral-900 p-5 text-white">
          <p class="font-mono text-xs text-neutral-500">2026</p>
          <p class="mt-2 text-2xl font-semibold tracking-tight">1B</p>
          <p class="text-sm font-medium">Decisions a day</p>
          <p class="mt-1.5 text-xs leading-relaxed text-neutral-400">Across 14 regions, with a median latency of 18 milliseconds.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="mt-12 grid grid-cols-3 divide-x divide-neutral-200 rounded-2xl border border-neutral-200 bg-white py-7 text-center">
    <div><p class="text-3xl font-semibold tracking-tight text-neutral-900">6</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">Years operating</p></div>
    <div><p class="text-3xl font-semibold tracking-tight text-neutral-900">12,400</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">Customers</p></div>
    <div><p class="text-3xl font-semibold tracking-tight text-neutral-900">28</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">People</p></div>
  </div>
</section>