Explore Tailwind CSS stat section examples to display key metrics and important numbers for your product or service. These blocks include a variety of layouts and styles to help you present data clearly and effectively.
<div class="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- card 1 -->
<div class="card p-6 border border-subtle overflow-hidden rounded-xl">
<div class="flex items-center justify-between w-full mb-3">
<p class="truncate text-sm font-medium text-subtle mb-0">Total Users</p>
<span class="badge badge-subtle-success">+12%</span>
</div>
<span class="flex items-baseline text-2xl font-semibold text-default">
71,897
<span class="ms-2 text-sm font-medium text-subtle">from 64k</span>
</span>
</div>
<!-- card 2 -->
<div class="card p-6 border border-subtle overflow-hidden rounded-xl">
<div class="flex items-center justify-between w-full mb-3">
<p class="truncate text-sm font-medium text-subtle mb-0">Avg. Session Time</p>
<span class="badge badge-subtle-success">+2.1%</span>
</div>
<span class="text-2xl font-semibold text-default">4m 32s</span>
</div>
<!-- card 3 -->
<div class="card p-6 border border-subtle overflow-hidden rounded-xl">
<div class="flex items-center justify-between w-full mb-3">
<p class="truncate text-sm font-medium text-subtle mb-0">Bounce Rate</p>
<span class="badge badge-subtle-danger">-4.3%</span>
</div>
<span class="text-2xl font-semibold text-default">24.57%</span>
</div>
<!-- card 4 -->
<div class="card p-6 border border-subtle overflow-hidden rounded-xl">
<div class="flex items-center justify-between w-full mb-3">
<p class="truncate text-sm font-medium text-subtle mb-0">Total Revenue</p>
<span class="badge badge-subtle-success">+18%</span>
</div>
<span class="text-2xl font-semibold text-default">$42.1k</span>
</div>
</div>
<div class="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- card 1 -->
<div class="card bg-default border-subtle p-6 rounded-xl">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-muted">Active Users</span>
<div class="p-2 rounded-lg bg-primary-lighter text-primary">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 640 640"><path fill="currentColor" d="M240 192c0-44.2 35.8-80 80-80s80 35.8 80 80s-35.8 80-80 80s-80-35.8-80-80m208 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128M144 544c0-70.7 57.3-128 128-128h96c70.7 0 128 57.3 128 128v8c0 13.3 10.7 24 24 24s24-10.7 24-24v-8c0-97.2-78.8-176-176-176h-96c-97.2 0-176 78.8-176 176v8c0 13.3 10.7 24 24 24s24-10.7 24-24z"></path></svg>
</div>
</div>
<p class="text-3xl font-semibold text-default mb-3">8,940</p>
<div class="text-sm flex items-center">
<span class="text-success font-medium">+14.2%</span>
<span class="ms-2 text-muted">growth this week</span>
</div>
</div>
<!-- card 2 -->
<div class="card bg-default border-subtle p-6 rounded-xl">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-muted">Conversion Rate</span>
<div class="p-2 rounded-lg bg-secondary-lighter text-secondary">
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
</div>
</div>
<p class="text-3xl font-semibold text-default mb-3">3.87%</p>
<div class="text-sm flex items-center">
<span class="text-success font-medium">+1.1%</span>
<span class="ms-2 text-muted">since yesterday</span>
</div>
</div>
<!-- card 3 -->
<div class="card bg-default border-subtle p-6 rounded-xl">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-muted">Avg. Session Time</span>
<div class="p-2 rounded-lg bg-warning-lighter text-warning">
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
</div>
<p class="text-3xl font-semibold text-default mb-3">5m 24s</p>
<div class="text-sm flex items-center">
<span class="text-danger font-medium">-0.8%</span>
<span class="ms-2 text-muted">drop from last week</span>
</div>
</div>
<!-- card 4 -->
<div class="card bg-default border-subtle p-6 rounded-xl">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-muted">New Signups</span>
<div class="p-2 rounded-lg bg-success-lighter text-success">
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M18 9l-6 6-4-4"></path></svg>
</div>
</div>
<p class="text-3xl font-semibold text-default mb-3">1,276</p>
<div class="text-sm flex items-center">
<span class="text-success font-medium">+9.6%</span>
<span class="ms-2 text-muted">vs last campaign</span>
</div>
</div>
</div>
<div class="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- card 1 -->
<div class="card border-subtle rounded-xl overflow-hidden">
<div class="p-6 bg-default">
<div class="flex items-center gap-2 mb-3">
<div class="p-2 bg-primary-lighter rounded-lg shrink-0">
<svg class="size-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<span class="text-sm text-muted">Total Revenue</span>
</div>
<div class="flex items-baseline">
<div class="text-2xl font-semibold text-default">$30,452</div>
<div class="ms-2 flex items-baseline text-sm font-semibold text-success">
12%
<svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
</div>
</div>
</div>
<div class="px-6 py-4 border-t border-subtle flex justify-between">
<span class="text-subtle font-medium">Last period comparison</span>
<a href="#" class="font-semibold no-underline">Details</a>
</div>
</div>
<!-- card 2 -->
<div class="card border-subtle rounded-xl overflow-hidden">
<div class="p-6 bg-default">
<div class="flex items-center gap-2 mb-3">
<div class="p-2 bg-secondary-lighter rounded-lg shrink-0">
<svg class="size-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
</div>
<span class="text-sm text-muted">Active Users</span>
</div>
<div class="flex items-baseline">
<div class="text-2xl font-semibold text-default">12,543</div>
<div class="ms-2 flex items-baseline text-sm font-semibold text-success">
5.4%
<svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
</div>
</div>
</div>
<div class="px-6 py-4 border-t border-subtle flex justify-between">
<span class="text-subtle font-medium">Last 7 days activity</span>
<a href="#" class="font-semibold no-underline">Details</a>
</div>
</div>
<!-- card 3 -->
<div class="card border-subtle rounded-xl overflow-hidden">
<div class="p-6 bg-default">
<div class="flex items-center gap-2 mb-3">
<div class="p-2 bg-warning-lighter rounded-lg shrink-0">
<svg class="size-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<span class="text-sm text-muted">Avg. Latency</span>
</div>
<div class="flex items-baseline">
<div class="text-2xl font-semibold text-default">142ms</div>
<div class="ms-2 flex items-baseline text-sm font-semibold text-danger">
2.1%
<svg class="size-3 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
</div>
</div>
</div>
<div class="px-6 py-4 border-t border-subtle flex justify-between">
<span class="text-subtle font-medium">System performance</span>
<a href="#" class="font-semibold no-underline">Details</a>
</div>
</div>
<!-- card 4 -->
<div class="card border-subtle rounded-xl overflow-hidden">
<div class="p-6 bg-default">
<div class="flex items-center gap-2 mb-3">
<div class="p-2 bg-success-lighter rounded-lg shrink-0">
<svg class="size-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
</div>
<span class="text-sm text-muted">Conversions</span>
</div>
<div class="flex items-baseline">
<div class="text-2xl font-semibold text-default">3.8%</div>
<div class="ms-2 flex items-baseline text-sm font-semibold text-success">
12.5%
<svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
</div>
</div>
</div>
<div class="px-6 py-4 border-t border-subtle flex justify-between">
<span class="text-subtle font-medium">Current funnel data</span>
<a href="#" class="font-semibold no-underline">Details</a>
</div>
</div>
</div>
<div class="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- card 1 -->
<div class="card p-6 border-subtle rounded-2xl">
<div class="flex justify-between items-start mb-6">
<p class="text-subtle text-xs font-semibold uppercase mb-0">Portfolio Value</p>
<div class="size-2 rounded-full bg-primary animate-pulse"></div>
</div>
<h3 class="text-4xl font-semibold text-default mb-10">$248,500</h3>
<div class="flex items-center gap-2 text-xs text-subtle">
<span class="badge badge-subtle-success badge-md border-0 self-start">
<svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
12.5%
</span>
Since last month
</div>
</div>
<!-- card 2 -->
<div class="card p-6 border-subtle rounded-2xl">
<p class="text-subtle text-xs font-semibold uppercase mb-6">24h Trade Volume</p>
<h3 class="text-4xl text-default font-semibold">$12.4k</h3>
<div class="flex items-end gap-1 h-8 mt-auto">
<div class="flex-1 bg-muted rounded-md h-4"></div>
<div class="flex-1 bg-muted rounded-md h-6"></div>
<div class="flex-1 bg-muted rounded-md h-8"></div>
<div class="flex-1 bg-primary rounded-md h-10"></div>
<div class="flex-1 bg-muted rounded-md h-7"></div>
<div class="flex-1 bg-muted rounded-md h-4"></div>
</div>
</div>
<!-- card 3 -->
<div class="card p-6 bg-primary rounded-2xl border-0">
<p class="text-white text-xs font-semibold uppercase mb-6">Est. APY Yield</p>
<h3 class="text-4xl text-white font-semibold">8.42%</h3>
<p class="text-sm text-white font-medium mt-auto mb-0">Auto-compounding</p>
</div>
<!-- card 4 -->
<div class="card p-6 border-subtle rounded-2xl">
<p class="text-subtle text-xs font-semibold uppercase mb-6">Network Status</p>
<div class="flex items-center justify-between mb-1">
<span class="text-muted text-sm font-medium">Uptime</span>
<span class="text-success text-sm font-medium">32%</span>
</div>
<div class="progress h-2 rounded-xs" role="progressbar" aria-label="Basic example" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-success w-8/25"></div></div>
<div class="flex items-center justify-between mt-auto">
<span class="text-muted text-sm font-medium">Latency</span>
<span class="text-subtle text-sm font-medium">42ms</span>
</div>
</div>
</div>
<div class="px-6 py-10 max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- card 1 -->
<div class="card p-6 rounded-2xl border-subtle">
<p class="text-xs font-semibold text-subtle uppercase mb-4">Gross Volume</p>
<div class="flex items-end gap-2 mb-12">
<span class="text-3xl font-semibold text-default tabular-nums">$42.8K</span>
<span class="mb-1 text-sm font-semibold text-success">12%↑</span>
</div>
<div class="flex gap-1">
<div class="flex-1 h-2 bg-success/20 rounded-full"></div>
<div class="flex-1 h-2 bg-success/40 rounded-full"></div>
<div class="flex-1 h-2 bg-success/60 rounded-full"></div>
<div class="flex-1 h-2 bg-success rounded-full"></div>
</div>
</div>
<!-- card 2 -->
<div class="card p-6 rounded-2xl border-subtle">
<p class="text-xs font-semibold text-subtle uppercase mb-4">New Customers</p>
<div class="flex items-end gap-2 mb-6">
<span class="text-3xl font-semibold text-default tabular-nums">1,248</span>
<span class="mb-1 text-sm font-semibold text-primary">+18</span>
</div>
<div class="avatar-group ms-2 [&>div]:shrink-0">
<div class="avatar avatar-xs"><img src="/images/avatar/avatar_1.webp" alt="Avatar" /></div>
<div class="avatar avatar-xs"><img src="/images/avatar/avatar_2.webp" alt="Avatar" /></div>
<div class="avatar avatar-xs"><img src="/images/avatar/avatar_3.webp" alt="Avatar" /></div>
<div class="avatar avatar-xs"><img src="/images/avatar/avatar_4.webp" alt="Avatar" /></div>
<div class="avatar avatar-xs">
<div class="avatar-name bg-primary text-base"><span class="text-xs">+14</span></div>
</div>
<span class="text-xs self-center ms-2 font-medium text-subtle truncate">Joined Today</span>
</div>
</div>
<!-- card 3 -->
<div class="card p-6 rounded-2xl border-subtle">
<p class="text-xs font-semibold text-subtle uppercase mb-4">Server Load</p>
<span class="text-3xl font-semibold text-default tabular-nums">
24
<span class="text-sm text-subtle">%</span>
</span>
<div class="mt-auto progress h-1.5 mb-1.5" role="progressbar" aria-label="Background example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar w-6/25"></div></div>
<span class="text-xs font-medium text-subtle">Optimal Range</span>
</div>
<!-- card 4 -->
<div class="card p-6 rounded-2xl border-subtle">
<p class="text-xs font-semibold text-subtle uppercase flex items-center gap-2 mb-4">
<span class="relative flex size-1.75 mb-0.5">
<span class="animate-ping absolute inline-flex size-full rounded-full bg-primary opacity-75"></span>
<span class="inline-flex rounded-full size-1.75 bg-primary"></span>
</span>
User CAST
</p>
<span class="text-3xl font-semibold text-default tabular-nums">
4.9
<span class="text-sm text-subtle">/ 5.0</span>
</span>
<div class="flex gap-0.5 mt-auto">
<svg class="size-4 text-warning" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<span class="text-xs font-medium text-subtle ms-1">Top 1% Percentile</span>
</div>
</div>
</div>