Tailwind CSS Stats Sections

Display key metrics and data points effectively with these versatile Tailwind CSS stats sections. Each component is designed for clarity and easy integration.

Use these copy-paste-ready sections to showcase user numbers, project milestones, financial data, or any important figures in a clean, responsive layout. Customize colors and spacing using Tailwind's utility classes to match your site's design.

Number + Label Stats

1.5M+

Active Users

500k

Downloads

98%

Satisfaction

<div class="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center py-8">
  <div>
    <p class="text-4xl font-bold text-blue-600">1.5M+</p>
    <p class="text-sm text-gray-500 mt-1">Active Users</p>
  </div>
  <div>
    <p class="text-4xl font-bold text-blue-600">500k</p>
    <p class="text-sm text-gray-500 mt-1">Downloads</p>
  </div>
  <div>
    <p class="text-4xl font-bold text-blue-600">98%</p>
    <p class="text-sm text-gray-500 mt-1">Satisfaction</p>
  </div>
</div>

Icon + Number + Label Stats

1.5M+

Active Users

500k

Downloads

98%

Satisfaction

<div class="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center py-8">
  <div>
    <div class="flex justify-center mb-2">
      <!-- User Group Icon -->
      <svg class="w-10 h-10 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
      </svg>
    </div>
    <p class="text-3xl font-semibold text-gray-800">1.5M+</p>
    <p class="text-sm text-gray-500 mt-1">Active Users</p>
  </div>
  <div>
    <div class="flex justify-center mb-2">
      <!-- Download Icon -->
      <svg class="w-10 h-10 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
      </svg>
    </div>
    <p class="text-3xl font-semibold text-gray-800">500k</p>
    <p class="text-sm text-gray-500 mt-1">Downloads</p>
  </div>
  <div>
    <div class="flex justify-center mb-2">
      <!-- Thumb Up Icon -->
      <svg class="w-10 h-10 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" />
      </svg>
    </div>
    <p class="text-3xl font-semibold text-gray-800">98%</p>
    <p class="text-sm text-gray-500 mt-1">Satisfaction</p>
  </div>
</div>

Stats in Grid Layout

120+

Projects Completed

Happy Clients

5,000+

Hours Worked

Team Members

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 py-6">
  <div class="text-center border border-gray-200 p-4 rounded-lg">
    <p class="text-3xl font-bold text-gray-800">120+</p>
    <p class="text-xs text-gray-500 mt-1 uppercase tracking-wider">Projects Completed</p>
  </div>
  <div class="text-center border border-gray-200 p-4 rounded-lg">
    <p class="text-3xl font-bold text-gray-800">85</p>
    <p class="text-xs text-gray-500 mt-1 uppercase tracking-wider">Happy Clients</p>
  </div>
  <div class="text-center border border-gray-200 p-4 rounded-lg">
    <p class="text-3xl font-bold text-gray-800">5,000+</p>
    <p class="text-xs text-gray-500 mt-1 uppercase tracking-wider">Hours Worked</p>
  </div>
    <div class="text-center border border-gray-200 p-4 rounded-lg">
    <p class="text-3xl font-bold text-gray-800">15</p>
    <p class="text-xs text-gray-500 mt-1 uppercase tracking-wider">Team Members</p>
  </div>
</div>

Stats in Card Layout

Revenue (YoY)

+15%

New Customers

1,200

Churn Rate

2.1%

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="bg-white p-6 rounded-lg shadow-md text-center">
    <p class="text-sm text-gray-500 mb-2">Revenue (YoY)</p>
    <p class="text-3xl font-semibold text-green-600">+15%</p>
  </div>
    <div class="bg-white p-6 rounded-lg shadow-md text-center">
    <p class="text-sm text-gray-500 mb-2">New Customers</p>
    <p class="text-3xl font-semibold text-gray-800">1,200</p>
  </div>
    <div class="bg-white p-6 rounded-lg shadow-md text-center">
    <p class="text-sm text-gray-500 mb-2">Churn Rate</p>
    <p class="text-3xl font-semibold text-red-600">2.1%</p>
  </div>
</div>

Horizontal Row Stats

Page Views

15k

Subscribers

99.9%

Uptime

24/7

Support

<div class="flex flex-wrap justify-around items-center divide-x divide-gray-300 py-6">
  <div class="text-center px-4 sm:px-6 lg:px-8 py-2">
    <p class="text-2xl font-semibold text-gray-800">4M</p>
    <p class="text-xs text-gray-500 uppercase tracking-wider">Page Views</p>
  </div>
  <div class="text-center px-4 sm:px-6 lg:px-8 py-2">
    <p class="text-2xl font-semibold text-gray-800">15k</p>
    <p class="text-xs text-gray-500 uppercase tracking-wider">Subscribers</p>
  </div>
    <div class="text-center px-4 sm:px-6 lg:px-8 py-2">
    <p class="text-2xl font-semibold text-gray-800">99.9%</p>
    <p class="text-xs text-gray-500 uppercase tracking-wider">Uptime</p>
  </div>
  <div class="text-center px-4 sm:px-6 lg:px-8 py-2">
    <p class="text-2xl font-semibold text-gray-800">24/7</p>
    <p class="text-xs text-gray-500 uppercase tracking-wider">Support</p>
  </div>
</div>

Split Layout Stats (Text on Left)

Trusted by Thousands

Join a growing community that relies on WPDean for insightful resources and tools. Our numbers speak for themselves.

Learn More →

10k+

Articles

50+

Resources

1M+

Monthly Readers

Years Online

<div class="flex flex-col md:flex-row items-center gap-8 lg:gap-16 py-8">
  <div class="md:w-1/2 text-center md:text-left">
    <h3 class="text-2xl font-bold text-gray-800 mb-3">Trusted by Thousands</h3>
    <p class="text-gray-600 mb-4">
        Join a growing community that relies on <span class="text-blue-600 font-semibold">WPDean</span> for insightful resources and tools. Our numbers speak for themselves.
    </p>
    <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More &rarr;</a>
  </div>
  <div class="md:w-1/2 grid grid-cols-2 gap-6">
    <div class="text-center bg-gray-100 p-4 rounded-lg">
      <p class="text-3xl font-bold text-blue-600">10k+</p>
      <p class="text-sm text-gray-500 mt-1">Articles</p>
    </div>
    <div class="text-center bg-gray-100 p-4 rounded-lg">
      <p class="text-3xl font-bold text-blue-600">50+</p>
      <p class="text-sm text-gray-500 mt-1">Resources</p>
    </div>
    <div class="text-center bg-gray-100 p-4 rounded-lg">
      <p class="text-3xl font-bold text-blue-600">1M+</p>
      <p class="text-sm text-gray-500 mt-1">Monthly Readers</p>
    </div>
    <div class="text-center bg-gray-100 p-4 rounded-lg">
      <p class="text-3xl font-bold text-blue-600">5</p>
      <p class="text-sm text-gray-500 mt-1">Years Online</p>
    </div>
  </div>
</div>

Stats with Progress Bars

Task Completion 75%

Profile Strength 90%

Storage Used 45%

<!-- Stats with Progress Bars -->
<div class="bg-white p-6 rounded-lg shadow-md">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Stat 1 -->
    <div>
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm font-medium text-gray-500">Task Completion</span>
        <span class="text-sm font-semibold text-blue-600">75%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 overflow-hidden">
        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
      </div>
    </div>
    <!-- Stat 2 -->
    <div>
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm font-medium text-gray-500">Profile Strength</span>
        <span class="text-sm font-semibold text-green-600">90%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 overflow-hidden">
        <div class="bg-green-600 h-2.5 rounded-full" style="width: 90%"></div>
      </div>
    </div>
    <!-- Stat 3 -->
    <div>
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm font-medium text-gray-500">Storage Used</span>
        <span class="text-sm font-semibold text-yellow-500">45%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 overflow-hidden">
        <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 45%"></div>
      </div>
    </div>
  </div>
</div>

Stats with Circular Progress Indicators (Visual)

Note: This uses icons as a visual cue for circular progress. True circular progress bars typically require SVG or JavaScript libraries.

85%

Server Uptime

60%

Energy Saved

15%

Error Rate

50%

Time Allocated

<!-- Stats with Circular Progress Indicators (Visual - Using Icons) -->
<div class="bg-white p-6 rounded-lg shadow-md">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 text-center">
    <!-- Stat 1 -->
    <div class="flex flex-col items-center">
      <svg class="w-12 h-12 text-blue-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      <div class="text-3xl font-bold text-gray-800">85%</div>
      <div class="text-sm text-gray-500 mt-1">Server Uptime</div>
    </div>
    <!-- Stat 2 -->
    <div class="flex flex-col items-center">
      <svg class="w-12 h-12 text-green-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
      <div class="text-3xl font-bold text-gray-800">60%</div>
      <div class="text-sm text-gray-500 mt-1">Energy Saved</div>
    </div>
    <!-- Stat 3 -->
    <div class="flex flex-col items-center">
      <svg class="w-12 h-12 text-red-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-12.728 12.728m12.728 0L5.636 5.636"></path></svg>
      <div class="text-3xl font-bold text-gray-800">15%</div>
      <div class="text-sm text-gray-500 mt-1">Error Rate</div>
    </div>
    <!-- Stat 4 -->
    <div class="flex flex-col items-center">
      <svg class="w-12 h-12 text-purple-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      <div class="text-3xl font-bold text-gray-800">50%</div>
      <div class="text-sm text-gray-500 mt-1">Time Allocated</div>
    </div>
  </div>
</div>

Animated Counting Stats

Note: The counting animation requires JavaScript. This example provides the final static numbers.

12,500+

Happy Users

350+

Projects Completed

Awards Won

<!-- Animated Counting Stats -->
<!-- NOTE: JavaScript is required to animate the numbers counting up. -->
<!-- Example JS (using Intersection Observer & basic counter):
  const counters = document.querySelectorAll('[data-target-value]');
  const speed = 200; // lower = faster

  const animateCounter = (counter) => {
    const target = +counter.getAttribute('data-target-value');
    const text = counter.innerText.replace(/[^0-9]/g, ''); // Get current number
    let current = +text || 0;
    const inc = target / speed;

    const updateCount = () => {
      if(current < target) {
        current += inc;
        // Format nicely (e.g., add commas) - basic example:
        let displayValue = Math.ceil(current).toLocaleString();
        if (counter.innerText.includes('+')) displayValue += '+'; // Keep '+' if present
        counter.innerText = displayValue;
        setTimeout(updateCount, 15); // Adjust timing
      } else {
        // Ensure exact target value is shown, formatted
        let finalValue = target.toLocaleString();
        if (counter.getAttribute('data-target-value').includes('+')) finalValue += '+';
         counter.innerText = finalValue;
      }
    };
    updateCount();
  };

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        animateCounter(entry.target);
        observer.unobserve(entry.target); // Animate only once
      }
    });
  }, { threshold: 0.5 }); // Trigger when 50% visible

  counters.forEach(counter => {
    observer.observe(counter);
    // Set initial text to 0 or placeholder if needed while JS loads
    // counter.innerText = '0';
  });
-->
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-8 rounded-lg shadow-lg">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
    <!-- Stat 1 -->
    <div>
      <!-- Use data-target-value for JS -->
      <div class="text-4xl font-extrabold" data-target-value="12500">12,500+</div>
      <div class="text-blue-100 uppercase text-sm tracking-wider mt-2">Happy Users</div>
    </div>
    <!-- Stat 2 -->
    <div>
      <div class="text-4xl font-extrabold" data-target-value="350">350+</div>
      <div class="text-blue-100 uppercase text-sm tracking-wider mt-2">Projects Completed</div>
    </div>
    <!-- Stat 3 -->
    <div>
      <div class="text-4xl font-extrabold" data-target-value="42">42</div>
      <div class="text-blue-100 uppercase text-sm tracking-wider mt-2">Awards Won</div>
    </div>
  </div>
</div>

Stats with Comparison

Total Revenue

$405,091.00

12.5%

vs. last month

Avg. Order Value

$98.50

3.2%

vs. last month

Active Subscriptions

5,210

0.0%

vs. last month

New Customers

890

25.8%

vs. last month

<!-- Stats with Comparison -->
<div class="bg-white p-6 rounded-lg shadow-md">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    <!-- Stat 1: Increase -->
    <div>
      <p class="text-sm font-medium text-gray-500 truncate">Total Revenue</p>
      <div class="mt-1 flex items-baseline space-x-2">
        <p class="text-2xl font-semibold text-gray-900">$405,091.00</p>
        <p class="flex items-baseline text-sm font-semibold text-green-600">
          <!-- Heroicon name: solid/arrow-sm-up -->
          <svg class="self-center flex-shrink-0 h-4 w-4 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.03 9.77a.75.75 0 01-1.06-1.06l5.5-5.5a.75.75 0 011.06 0l5.5 5.5a.75.75 0 11-1.06 1.06L10.75 5.612V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
          </svg>
          <span class="ml-1">12.5%</span>
        </p>
      </div>
      <p class="text-xs text-gray-400">vs. last month</p>
    </div>

    <!-- Stat 2: Decrease -->
    <div>
      <p class="text-sm font-medium text-gray-500 truncate">Avg. Order Value</p>
      <div class="mt-1 flex items-baseline space-x-2">
        <p class="text-2xl font-semibold text-gray-900">$98.50</p>
        <p class="flex items-baseline text-sm font-semibold text-red-600">
          <!-- Heroicon name: solid/arrow-sm-down -->
          <svg class="self-center flex-shrink-0 h-4 w-4 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l4.22-4.158a.75.75 0 111.06 1.06l-5.5 5.5a.75.75 0 01-1.06 0l-5.5-5.5a.75.75 0 111.06-1.06L9.25 14.388V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
          </svg>
          <span class="ml-1">3.2%</span>
        </p>
      </div>
      <p class="text-xs text-gray-400">vs. last month</p>
    </div>

    <!-- Stat 3: Neutral/No Change (Example) -->
    <div>
      <p class="text-sm font-medium text-gray-500 truncate">Active Subscriptions</p>
      <div class="mt-1 flex items-baseline space-x-2">
        <p class="text-2xl font-semibold text-gray-900">5,210</p>
        <p class="flex items-baseline text-sm font-semibold text-gray-500">
          <!-- Optional: Could use a neutral icon like minus-sm or just text -->
          <span class="ml-1">0.0%</span>
        </p>
      </div>
      <p class="text-xs text-gray-400">vs. last month</p>
    </div>

    <!-- Stat 4: Increase -->
    <div>
      <p class="text-sm font-medium text-gray-500 truncate">New Customers</p>
      <div class="mt-1 flex items-baseline space-x-2">
        <p class="text-2xl font-semibold text-gray-900">890</p>
        <p class="flex items-baseline text-sm font-semibold text-green-600">
          <!-- Heroicon name: solid/arrow-sm-up -->
          <svg class="self-center flex-shrink-0 h-4 w-4 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.03 9.77a.75.75 0 01-1.06-1.06l5.5-5.5a.75.75 0 011.06 0l5.5 5.5a.75.75 0 11-1.06 1.06L10.75 5.612V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
          </svg>
          <span class="ml-1">25.8%</span>
        </p>
      </div>
      <p class="text-xs text-gray-400">vs. last month</p>
    </div>
  </div>
</div>

Stats with Tooltips / Info Icons

Note: Uses basic `group-hover` for tooltips. More complex tooltips might need JS.

Bounce Rate

48.2%

Conversion Rate

3.5%

Avg. Session Duration

2m 15s

<!-- Stats with Tooltips / Info Icons -->
<!-- Uses group-hover for basic tooltip functionality. -->
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Stat 1 with Tooltip -->
    <div class="relative group">
      <div class="flex items-center space-x-1 mb-1">
        <span class="text-sm font-medium text-gray-600">Bounce Rate</span>
        <!-- Info Icon -->
        <svg class="w-4 h-4 text-gray-400 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <!-- Tooltip -->
        <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max hidden group-hover:block px-2 py-1 bg-gray-700 text-white text-xs rounded shadow-lg whitespace-nowrap z-10">
          Percentage of single-page sessions
        </span>
      </div>
      <p class="text-3xl font-semibold text-gray-900">48.2%</p>
    </div>

    <!-- Stat 2 with Tooltip -->
    <div class="relative group">
      <div class="flex items-center space-x-1 mb-1">
        <span class="text-sm font-medium text-gray-600">Conversion Rate</span>
        <!-- Info Icon -->
        <svg class="w-4 h-4 text-gray-400 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <!-- Tooltip -->
        <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max hidden group-hover:block px-2 py-1 bg-gray-700 text-white text-xs rounded shadow-lg whitespace-nowrap z-10">
          Users completing a desired goal
        </span>
      </div>
      <p class="text-3xl font-semibold text-gray-900">3.5%</p>
    </div>

    <!-- Stat 3 (No Tooltip) -->
    <div>
      <div class="flex items-center space-x-1 mb-1">
        <span class="text-sm font-medium text-gray-600">Avg. Session Duration</span>
      </div>
      <p class="text-3xl font-semibold text-gray-900">2m 15s</p>
    </div>
  </div>
</div>

FAQ on Tailwind CSS Stats Sections

How do I create a basic stats section with Tailwind CSS?

Build stats sections using Tailwind's grid and flex utilities: grid grid-cols-2 md:grid-cols-4 gap-4 for the container and p-4 bg-white rounded shadow for stat cards. This approach lets you craft responsive metrics displays without custom CSS. The utility-first methodology makes creating data visualization components intuitive while maintaining design consistency.

What layout options work best for stats sections?

Tailwind offers multiple layout patterns for statistics displays:

Grid layouts for uniform stat cards
Flex containers for horizontal stat strips
Card components for detailed metric groups
Dashboard widgets combining stats with charts
Responsive designs that adapt to screen sizes

This component design approach prioritizes both aesthetics and functional data presentation.

How can I make stats sections responsive?

Create responsive stats displays using Tailwind's breakpoint prefixes: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4. This ensures your metrics visualization looks great on all devices. Consider using text-sm md:text-base for labels and text-2xl md:text-4xl for numerical values to maintain readability across screen sizes.

What are some common components in a stats section?

Effective stats sections typically include these elements:

Metric value with appropriate text sizing
Descriptive label explaining the metric
Trend indicators showing changes over time
Icons for visual reinforcement
Color coding to indicate performance

These components work together to create informative dashboard elements that communicate data clearly.

How do I add animations to stats counters?

Implement animated counters by combining Tailwind with JavaScript libraries like CountUp.js. Style elements with transition-all duration-300 classes and add interaction states with hover: and group-hover: prefixes. For more complex animations, use Tailwind's JIT compiler with custom animation utilities defined in your config file.

How can I customize the appearance of my stats sections?

Customize stats sections by extending your Tailwind config with project-specific colors, spacing, and typography. Create consistent design systems using Tailwind's theme customization. For component reuse, consider extracting common patterns with @apply directives or building custom components in frameworks like React or Vue, while maintaining Tailwind's utility-first approach.

What's the best way to handle dark mode for stats sections?

Implement dark mode using Tailwind's dark: variant prefix: bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200. This creates adaptive UI components that respond to system preferences or toggle switches. For consistent dark mode experiences, plan your color palette with both light and dark variants for all UI elements in your stats display design.

How do I create comparison stats with visual indicators?

Build comparison stats with these techniques:

Use color-coded arrows with text-green-500 or text-red-500
Add percentage indicators next to base values
Implement progress bars with w-[75%] h-2 bg-blue-500 rounded
Create mini charts using SVG or chart libraries
Include contextual tooltips for additional information

These visual elements enhance your analytics interface components by adding context to raw numbers.

How do I integrate data from APIs into Tailwind stats sections?

Connect stats sections to live data by combining Tailwind with JavaScript frameworks. Fetch data using async functions, then render dynamic content into your Tailwind-styled components. For real-time updates, consider using WebSockets or polling techniques while maintaining the responsive data presentation capabilities that Tailwind provides for your metrics dashboard design.

What performance considerations should I keep in mind for stats sections?

Optimize stats section performance by purging unused styles, minimizing JavaScript dependencies, and implementing lazy loading for off-screen content. Use Tailwind's JIT mode to reduce CSS bundle size. For data-heavy dashboards, consider pagination or infinite scrolling techniques to maintain smooth user experiences even with large statistics component collections.