Metric trio inside a panel
Create a stats block with Tailwind CSS inside a dark rounded-3xl panel. Three metrics in a row, each with a large gradient or white number, a label, and a tiny up/down delta chip. Add a short heading above the metrics inside the same panel.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Create a stats block with Tailwind CSS inside a dark rounded-3xl panel. Three metrics in a row, each with a large gradient or white number, a label, and a tiny up/down delta chip. Add a short heading above the metrics inside the same panel.<section class="mx-auto max-w-4xl px-6 py-16">
<div class="rounded-3xl bg-neutral-900 p-10 text-white">
<h2 class="text-lg font-medium text-neutral-300">Trusted at scale</h2>
<div class="mt-8 grid gap-8 sm:grid-cols-3">
<div>
<p class="text-4xl font-semibold">$1.2B</p>
<p class="mt-1 text-sm text-neutral-400">Processed <span class="ml-1 rounded bg-green-500/15 px-1.5 py-0.5 text-xs text-green-400">↑ 24%</span></p>
</div>
<div>
<p class="text-4xl font-semibold">38k</p>
<p class="mt-1 text-sm text-neutral-400">Active teams <span class="ml-1 rounded bg-green-500/15 px-1.5 py-0.5 text-xs text-green-400">↑ 12%</span></p>
</div>
<div>
<p class="text-4xl font-semibold">120ms</p>
<p class="mt-1 text-sm text-neutral-400">Avg. latency <span class="ml-1 rounded bg-red-500/15 px-1.5 py-0.5 text-xs text-red-400">↓ 8%</span></p>
</div>
</div>
</div>
</section>