Benchmark against industry

Design a benchmark comparison with Tailwind CSS. Inside a bordered rounded-2xl card, put a header with a title, a muted line naming the peer set and sample size, and a small select for the industry. Below, five metric blocks stacked with generous spacing: each has the metric name and a short explanation on the left, and a comparison bar area on the right holding three stacked thin bars labelled You, Median and Top 10%, with widths set inline, values printed at the ends, and the user bar in neutral-900 while the others are neutral-300 and green respectively. Add a small verdict pill to each metric reading ahead, level or behind in the appropriate tint. Under the metrics, a footer note explaining the data is self-reported and anonymised, with the last refresh date in monospace.

<section class="mx-auto max-w-3xl px-6 py-14">
  <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">How you compare</h2>
        <p class="mt-0.5 text-sm text-neutral-500">Against 412 B2B SaaS companies with 20–100 staff</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>B2B SaaS</option>
        <option>Marketplaces</option>
        <option>Fintech</option>
      </select>
    </div>

    <div class="mt-8 space-y-8">
      <div class="grid gap-4 sm:grid-cols-[200px_1fr]">
        <div>
          <p class="flex items-center gap-2 text-sm font-medium text-neutral-900">Activation rate <span class="rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-medium text-green-700">Ahead</span></p>
          <p class="mt-1 text-xs leading-relaxed text-neutral-500">Signups reaching first value within 7 days.</p>
        </div>
        <div class="space-y-2">
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">You</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-neutral-900" style="width:76%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-900">38%</span></div>
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">Median</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-neutral-300" style="width:54%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">27%</span></div>
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">Top 10%</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-green-500" style="width:92%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">46%</span></div>
        </div>
      </div>

      <div class="grid gap-4 sm:grid-cols-[200px_1fr]">
        <div>
          <p class="flex items-center gap-2 text-sm font-medium text-neutral-900">Net revenue retention <span class="rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] font-medium text-neutral-600">Level</span></p>
          <p class="mt-1 text-xs leading-relaxed text-neutral-500">Expansion minus churn, trailing twelve months.</p>
        </div>
        <div class="space-y-2">
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">You</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-neutral-900" style="width:61%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-900">108%</span></div>
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">Median</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-neutral-300" style="width:59%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">106%</span></div>
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">Top 10%</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-green-500" style="width:78%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">128%</span></div>
        </div>
      </div>

      <div class="grid gap-4 sm:grid-cols-[200px_1fr]">
        <div>
          <p class="flex items-center gap-2 text-sm font-medium text-neutral-900">Support first response <span class="rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-medium text-red-700">Behind</span></p>
          <p class="mt-1 text-xs leading-relaxed text-neutral-500">Median minutes to a human reply, business hours.</p>
        </div>
        <div class="space-y-2">
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">You</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-neutral-900" style="width:82%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-900">96m</span></div>
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">Median</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-neutral-300" style="width:52%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">61m</span></div>
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">Top 10%</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-green-500" style="width:16%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">19m</span></div>
        </div>
      </div>

      <div class="grid gap-4 sm:grid-cols-[200px_1fr]">
        <div>
          <p class="flex items-center gap-2 text-sm font-medium text-neutral-900">Gross margin <span class="rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-medium text-green-700">Ahead</span></p>
          <p class="mt-1 text-xs leading-relaxed text-neutral-500">After hosting, support and payment costs.</p>
        </div>
        <div class="space-y-2">
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">You</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-neutral-900" style="width:84%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-900">84%</span></div>
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">Median</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-neutral-300" style="width:74%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">74%</span></div>
          <div class="flex items-center gap-3"><span class="w-16 shrink-0 text-[11px] text-neutral-500">Top 10%</span><div class="h-2.5 flex-1 rounded-full bg-neutral-100"><div class="h-full rounded-full bg-green-500" style="width:88%"></div></div><span class="w-10 shrink-0 text-right font-mono text-xs text-neutral-400">88%</span></div>
        </div>
      </div>
    </div>

    <p class="mt-8 border-t border-neutral-200 pt-5 text-xs leading-relaxed text-neutral-400">
      Figures are self-reported and anonymised; companies appear only where at least twelve peers submitted the same metric. Last refreshed <span class="font-mono">2026-08-01</span>.
    </p>
  </div>
</section>