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-800

Use 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 Tools

Frequently 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.