sectionstatsbeginner
Stats Section
A horizontal stats bar displaying key metrics with large numbers and labels.
Preview
10k+
Active Users
99.9%
Uptime
50+
Integrations
4.9/5
User Rating
<section class="bg-white py-16 px-4 border-y border-gray-100">
<div class="max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<p class="text-4xl font-extrabold text-indigo-600">10k+</p>
<p class="text-sm text-gray-500 mt-1">Active Users</p>
</div>
<div>
<p class="text-4xl font-extrabold text-indigo-600">99.9%</p>
<p class="text-sm text-gray-500 mt-1">Uptime</p>
</div>
<div>
<p class="text-4xl font-extrabold text-indigo-600">50+</p>
<p class="text-sm text-gray-500 mt-1">Integrations</p>
</div>
<div>
<p class="text-4xl font-extrabold text-indigo-600">4.9/5</p>
<p class="text-sm text-gray-500 mt-1">User Rating</p>
</div>
</div>
</section>Color Breakdown
Background
bg-white
#ffffff
Numbers
text-indigo-600
#4f46e5
Labels
text-gray-500
#6b7280
Border
border-gray-100
#f3f4f6
Dark Mode Variant
Add these Tailwind classes for a dark mode adaptation of this recipe.
dark:bg-gray-900 dark:text-indigo-400 dark:border-gray-800Use Cases
Landing page social proofAbout pagesCompany overviews
Browser Support
All modern browsers.
Related Recipes
Build Your Own Color Recipe
Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.
Explore ToolsFrequently Asked Questions
How do I animate the numbers counting up?▼
Use a JavaScript library like CountUp.js or use the Intersection Observer API to trigger a count animation when the section enters the viewport.