Conversion funnel steps

Design a conversion funnel block with Tailwind CSS. Inside a bordered rounded-2xl card, put a header row with a title, a muted date range and a small select for the segment. Below, five funnel rows stacked vertically: each row has a label and a count on the left in a fixed-width column, then a bar whose width is set inline as a percentage on a neutral-100 track, with the fill in neutral-900 and the conversion percentage printed inside the fill when it is wide enough or beside it when it is not. Between consecutive rows, a small indented note in muted red-ish text showing how many people dropped and the percentage lost. Under the rows, a summary strip with three figures — entered, completed and overall conversion — separated by vertical rules. Keep every number monospaced so the columns line up.

<section class="mx-auto max-w-3xl px-6 py-16">
  <div class="rounded-2xl border border-neutral-200 bg-white p-7">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <h2 class="text-lg font-semibold text-neutral-900">Signup funnel</h2>
        <p class="text-sm text-neutral-500">1 – 31 July · web only</p>
      </div>
      <select class="rounded-xl border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-700 outline-none focus:border-neutral-900">
        <option>All traffic</option>
        <option>Paid search</option>
        <option>Direct</option>
      </select>
    </div>

    <div class="mt-8 space-y-1">
      <div class="flex items-center gap-4">
        <div class="w-36 shrink-0">
          <p class="text-sm font-medium text-neutral-900">Visited pricing</p>
          <p class="font-mono text-xs text-neutral-400">24,180</p>
        </div>
        <div class="h-9 flex-1 overflow-hidden rounded-lg bg-neutral-100">
          <div class="flex h-full items-center justify-end rounded-lg bg-neutral-900 pr-3" style="width:100%"><span class="font-mono text-xs text-white">100%</span></div>
        </div>
      </div>
      <p class="ml-40 py-1 text-xs text-red-600">−13,420 left without clicking (55.5%)</p>

      <div class="flex items-center gap-4">
        <div class="w-36 shrink-0">
          <p class="text-sm font-medium text-neutral-900">Started signup</p>
          <p class="font-mono text-xs text-neutral-400">10,760</p>
        </div>
        <div class="h-9 flex-1 overflow-hidden rounded-lg bg-neutral-100">
          <div class="flex h-full items-center justify-end rounded-lg bg-neutral-900 pr-3" style="width:44.5%"><span class="font-mono text-xs text-white">44.5%</span></div>
        </div>
      </div>
      <p class="ml-40 py-1 text-xs text-red-600">−4,102 abandoned the form (38.1%)</p>

      <div class="flex items-center gap-4">
        <div class="w-36 shrink-0">
          <p class="text-sm font-medium text-neutral-900">Verified email</p>
          <p class="font-mono text-xs text-neutral-400">6,658</p>
        </div>
        <div class="h-9 flex-1 overflow-hidden rounded-lg bg-neutral-100">
          <div class="flex h-full items-center justify-end rounded-lg bg-neutral-900 pr-3" style="width:27.5%"><span class="font-mono text-xs text-white">27.5%</span></div>
        </div>
      </div>
      <p class="ml-40 py-1 text-xs text-red-600">−2,244 never returned (33.7%)</p>

      <div class="flex items-center gap-4">
        <div class="w-36 shrink-0">
          <p class="text-sm font-medium text-neutral-900">Connected a source</p>
          <p class="font-mono text-xs text-neutral-400">4,414</p>
        </div>
        <div class="h-9 flex-1 overflow-hidden rounded-lg bg-neutral-100">
          <div class="flex h-full items-center justify-end rounded-lg bg-neutral-900 pr-3" style="width:18.3%"><span class="font-mono text-xs text-white">18.3%</span></div>
        </div>
      </div>
      <p class="ml-40 py-1 text-xs text-red-600">−1,986 stopped before the first query (45.0%)</p>

      <div class="flex items-center gap-4">
        <div class="w-36 shrink-0">
          <p class="text-sm font-medium text-neutral-900">Ran a query</p>
          <p class="font-mono text-xs text-neutral-400">2,428</p>
        </div>
        <div class="h-9 flex-1 overflow-hidden rounded-lg bg-neutral-100">
          <div class="h-full rounded-lg bg-neutral-900" style="width:10%"></div>
        </div>
        <span class="w-12 shrink-0 font-mono text-xs text-neutral-500">10.0%</span>
      </div>
    </div>

    <div class="mt-8 grid grid-cols-3 divide-x divide-neutral-200 border-t border-neutral-200 pt-5 text-center">
      <div><p class="font-mono text-xl font-semibold text-neutral-900">24,180</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">Entered</p></div>
      <div><p class="font-mono text-xl font-semibold text-neutral-900">2,428</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">Completed</p></div>
      <div><p class="font-mono text-xl font-semibold text-neutral-900">10.0%</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">End to end</p></div>
    </div>
  </div>
</section>