Metric cards with sparkline bars

Build a stats row with Tailwind CSS where each card pairs a metric with a tiny bar-chart sparkline drawn purely in CSS. Each bordered rounded-2xl card has a muted label, a large value with a colored delta chip beside it, and a bottom row of eight thin rounded bars of varying heights using flex items-end and h- utilities; the final bar is dark to mark the current period. Use three cards on a responsive grid.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="grid gap-4 md:grid-cols-3">
    <div class="rounded-2xl border border-neutral-200 bg-white p-5">
      <p class="text-sm text-neutral-500">Weekly signups</p>
      <div class="mt-2 flex items-baseline gap-2">
        <span class="text-3xl font-semibold text-neutral-900">1,284</span>
        <span class="rounded bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700">↑ 18%</span>
      </div>
      <div class="mt-5 flex h-12 items-end gap-1.5">
        <span class="h-4 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-6 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-5 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-8 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-7 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-10 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-9 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-12 flex-1 rounded-sm bg-neutral-900"></span>
      </div>
    </div>
    <div class="rounded-2xl border border-neutral-200 bg-white p-5">
      <p class="text-sm text-neutral-500">Activation rate</p>
      <div class="mt-2 flex items-baseline gap-2">
        <span class="text-3xl font-semibold text-neutral-900">62%</span>
        <span class="rounded bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700">↑ 4pt</span>
      </div>
      <div class="mt-5 flex h-12 items-end gap-1.5">
        <span class="h-6 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-5 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-7 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-6 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-9 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-8 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-10 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-11 flex-1 rounded-sm bg-neutral-900"></span>
      </div>
    </div>
    <div class="rounded-2xl border border-neutral-200 bg-white p-5">
      <p class="text-sm text-neutral-500">Support backlog</p>
      <div class="mt-2 flex items-baseline gap-2">
        <span class="text-3xl font-semibold text-neutral-900">37</span>
        <span class="rounded bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700">↑ 9</span>
      </div>
      <div class="mt-5 flex h-12 items-end gap-1.5">
        <span class="h-3 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-5 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-4 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-6 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-8 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-7 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-9 flex-1 rounded-sm bg-neutral-200"></span>
        <span class="h-12 flex-1 rounded-sm bg-neutral-900"></span>
      </div>
    </div>
  </div>
</section>