Highlight key metrics and performance figures with Tailwind CSS stats sections. These layouts showcase numbers, percentages, and visual indicators in a clean, modern design. Ideal for SaaS platforms, business pages, or marketing sites aiming to convey credibility and measurable impact at a glance.
const stats = [
{ id: 1, name: "Transactions every 24 hours", value: "44M" },
{ id: 2, name: "Assets under holding", value: "$20 trillion" },
{ id: 3, name: "New users annually", value: "46K+" }
];
export default function StatSection() {
return (
<section className="py-12 sm:py-20">
<div className="mx-auto max-w-7xl px-4">
<dl className="grid grid-cols-1 gap-6 text-center lg:grid-cols-3">
{stats.map((stat) => (
<div
key={stat.id}
className="bg-muted/50 hover:bg-muted flex flex-col gap-y-2 rounded-lg py-6 lg:py-10">
<dt className="text-muted-foreground">{stat.name}</dt>
<dd className="font-heading order-first text-3xl sm:text-4xl">{stat.value}</dd>
</div>
))}
</dl>
</div>
</section>
);
}
npx shadcn@latest add @bundui/stats-section-02import { StatsSection02 } from "@/components/stats-section-02"<StatsSection02 />