Stats Components

Beautiful, responsive stats components built with TailwindCSS. Perfect for displaying statistics, progress bars, and data visualization with modern designs.

1. Modern Stats Grid

A grid of three modern stats cards with gradients and hover effects.

1,234
Total Users
567
Active Sessions
89%
Conversion Rate
<!-- Modern Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Card 1 -->
  <div class="bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
    <div class="text-center">
      <div class="text-4xl font-bold mb-2">1,234</div>
      <div class="text-purple-100">Total Users</div>
    </div>
  </div>
  <!-- Card 2 -->
  <div class="bg-gradient-to-br from-blue-500 to-blue-700 text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
    <div class="text-center">
      <div class="text-4xl font-bold mb-2">567</div>
      <div class="text-blue-100">Active Sessions</div>
    </div>
  </div>
  <!-- Card 3 -->
  <div class="bg-gradient-to-br from-green-500 to-green-700 text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
    <div class="text-center">
      <div class="text-4xl font-bold mb-2">89%</div>
      <div class="text-green-100">Conversion Rate</div>
    </div>
  </div>
</div>
<template>
  <!-- Modern Stats Grid -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div v-for="stat in stats" :key="stat.id" :class="['text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300', stat.gradient]">
      <div class="text-center">
        <div class="text-4xl font-bold mb-2">{{ stat.value }}</div>
        <div :class="stat.textColor">{{ stat.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
const stats = [
  { id: 1, value: '1,234', label: 'Total Users', gradient: 'bg-gradient-to-br from-purple-500 to-purple-700', textColor: 'text-purple-100' },
  { id: 2, value: '567', label: 'Active Sessions', gradient: 'bg-gradient-to-br from-blue-500 to-blue-700', textColor: 'text-blue-100' },
  { id: 3, value: '89%', label: 'Conversion Rate', gradient: 'bg-gradient-to-br from-green-500 to-green-700', textColor: 'text-green-100' }
]
</script>
import React from 'react'

export default function ModernStatsGrid() {
  const stats = [
    { id: 1, value: '1,234', label: 'Total Users', gradient: 'bg-gradient-to-br from-purple-500 to-purple-700', textColor: 'text-purple-100' },
    { id: 2, value: '567', label: 'Active Sessions', gradient: 'bg-gradient-to-br from-blue-500 to-blue-700', textColor: 'text-blue-100' },
    { id: 3, value: '89%', label: 'Conversion Rate', gradient: 'bg-gradient-to-br from-green-500 to-green-700', textColor: 'text-green-100' }
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {stats.map(stat => (
        <div key={stat.id} className={`text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 ${stat.gradient}`}>
          <div className="text-center">
            <div className="text-4xl font-bold mb-2">{stat.value}</div>
            <div className={stat.textColor}>{stat.label}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

2. Stats with Icons Grid

A grid of three stats cards with icons for better visual appeal and modern glassmorphism effect.

567
Completed Tasks
1,234
Total Projects
89
Happy Clients
<!-- Stats with Icons Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Card 1 -->
  <div class="bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>
      <div class="ml-4">
        <div class="text-2xl font-bold text-gray-900">567</div>
        <div class="text-gray-600">Completed Tasks</div>
      </div>
    </div>
  </div>
  <!-- Card 2 -->
  <div class="bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>
      <div class="ml-4">
        <div class="text-2xl font-bold text-gray-900">1,234</div>
        <div class="text-gray-600">Total Projects</div>
      </div>
    </div>
  </div>
  <!-- Card 3 -->
  <div class="bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>
      <div class="ml-4">
        <div class="text-2xl font-bold text-gray-900">89</div>
        <div class="text-gray-600">Happy Clients</div>
      </div>
    </div>
  </div>
</div>
<template>
  <!-- Stats with Icons Grid -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div v-for="stat in stats" :key="stat.id" class="bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <div :class="['w-12 h-12 rounded-lg flex items-center justify-center', stat.iconBg]">
            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
            </svg>
          </div>
        </div>
        <div class="ml-4">
          <div class="text-2xl font-bold text-gray-900">{{ stat.value }}</div>
          <div class="text-gray-600">{{ stat.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const stats = [
  { id: 1, value: '567', label: 'Completed Tasks', iconBg: 'bg-gradient-to-br from-green-400 to-green-600' },
  { id: 2, value: '1,234', label: 'Total Projects', iconBg: 'bg-gradient-to-br from-blue-400 to-blue-600' },
  { id: 3, value: '89', label: 'Happy Clients', iconBg: 'bg-gradient-to-br from-purple-400 to-purple-600' }
]
</script>
import React from 'react'

export default function StatsWithIconsGrid() {
  const stats = [
    { id: 1, value: '567', label: 'Completed Tasks', iconBg: 'bg-gradient-to-br from-green-400 to-green-600' },
    { id: 2, value: '1,234', label: 'Total Projects', iconBg: 'bg-gradient-to-br from-blue-400 to-blue-600' },
    { id: 3, value: '89', label: 'Happy Clients', iconBg: 'bg-gradient-to-br from-purple-400 to-purple-600' }
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {stats.map(stat => (
        <div key={stat.id} className="bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${stat.iconBg}`}>
                <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
              </div>
            </div>
            <div className="ml-4">
              <div className="text-2xl font-bold text-gray-900">{stat.value}</div>
              <div className="text-gray-600">{stat.label}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

3. Progress Stats Grid

A grid of three stats cards with progress bars and modern gradient designs.

75%
Project Completion
90%
Task Progress
60%
Goal Achievement
<!-- Progress Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Card 1 -->
  <div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl p-6 shadow-lg">
    <div class="text-center mb-4">
      <div class="text-3xl font-bold text-blue-600 mb-2">75%</div>
      <div class="text-gray-700 font-medium">Project Completion</div>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
      <div class="bg-gradient-to-r from-blue-500 to-indigo-600 h-3 rounded-full transition-all duration-1000 ease-out" style="width: 75%"></div>
    </div>
  </div>
  <!-- Card 2 -->
  <div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl p-6 shadow-lg">
    <div class="text-center mb-4">
      <div class="text-3xl font-bold text-green-600 mb-2">90%</div>
      <div class="text-gray-700 font-medium">Task Progress</div>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
      <div class="bg-gradient-to-r from-green-500 to-emerald-600 h-3 rounded-full transition-all duration-1000 ease-out" style="width: 90%"></div>
    </div>
  </div>
  <!-- Card 3 -->
  <div class="bg-gradient-to-br from-purple-50 to-pink-100 rounded-xl p-6 shadow-lg">
    <div class="text-center mb-4">
      <div class="text-3xl font-bold text-purple-600 mb-2">60%</div>
      <div class="text-gray-700 font-medium">Goal Achievement</div>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
      <div class="bg-gradient-to-r from-purple-500 to-pink-600 h-3 rounded-full transition-all duration-1000 ease-out" style="width: 60%"></div>
    </div>
  </div>
</div>
<template>
  <!-- Progress Stats Grid -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div v-for="stat in stats" :key="stat.id" :class="['rounded-xl p-6 shadow-lg', stat.bgGradient]">
      <div class="text-center mb-4">
        <div :class="['text-3xl font-bold mb-2', stat.textColor]">{{ stat.percentage }}%</div>
        <div class="text-gray-700 font-medium">{{ stat.label }}</div>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
        <div :class="['h-3 rounded-full transition-all duration-1000 ease-out', stat.barGradient]" :style="{ width: stat.percentage + '%' }"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
const stats = [
  { id: 1, percentage: 75, label: 'Project Completion', bgGradient: 'bg-gradient-to-br from-blue-50 to-indigo-100', textColor: 'text-blue-600', barGradient: 'bg-gradient-to-r from-blue-500 to-indigo-600' },
  { id: 2, percentage: 90, label: 'Task Progress', bgGradient: 'bg-gradient-to-br from-green-50 to-emerald-100', textColor: 'text-green-600', barGradient: 'bg-gradient-to-r from-green-500 to-emerald-600' },
  { id: 3, percentage: 60, label: 'Goal Achievement', bgGradient: 'bg-gradient-to-br from-purple-50 to-pink-100', textColor: 'text-purple-600', barGradient: 'bg-gradient-to-r from-purple-500 to-pink-600' }
]
</script>
import React from 'react'

export default function ProgressStatsGrid() {
  const stats = [
    { id: 1, percentage: 75, label: 'Project Completion', bgGradient: 'bg-gradient-to-br from-blue-50 to-indigo-100', textColor: 'text-blue-600', barGradient: 'bg-gradient-to-r from-blue-500 to-indigo-600' },
    { id: 2, percentage: 90, label: 'Task Progress', bgGradient: 'bg-gradient-to-br from-green-50 to-emerald-100', textColor: 'text-green-600', barGradient: 'bg-gradient-to-r from-green-500 to-emerald-600' },
    { id: 3, percentage: 60, label: 'Goal Achievement', bgGradient: 'bg-gradient-to-br from-purple-50 to-pink-100', textColor: 'text-purple-600', barGradient: 'bg-gradient-to-r from-purple-500 to-pink-600' }
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {stats.map(stat => (
        <div key={stat.id} className={`rounded-xl p-6 shadow-lg ${stat.bgGradient}`}>
          <div className="text-center mb-4">
            <div className={`text-3xl font-bold mb-2 ${stat.textColor}`}>{stat.percentage}%</div>
            <div className="text-gray-700 font-medium">{stat.label}</div>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
            <div className={`h-3 rounded-full transition-all duration-1000 ease-out ${stat.barGradient}`} style= {{ width: `${stat.percentage}%` }}></div>
          </div>
        </div>
      ))}
    </div>
  );
}

4. Comparison Stats Grid

A grid of three stats cards showing comparison with trend indicators, icons, and detailed metrics for modern dashboards.

$12,345
Monthly Revenue
+12.5%
Compared to last month
8,765
Website Visitors
+8.2%
Compared to last month
2,345
New Subscribers
-3.1%
Compared to last month
<!-- Comparison Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Card 1 -->
  <div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center">
        <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center mr-3">
          <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
          </svg>
        </div>
        <div>
          <div class="text-2xl font-bold text-gray-900">$12,345</div>
          <div class="text-sm text-gray-600">Monthly Revenue</div>
        </div>
      </div>
      <div class="flex items-center bg-green-100 rounded-lg p-2">
        <svg class="w-4 h-4 text-green-600 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
        </svg>
        <span class="text-xs text-green-700 font-semibold">+12.5%</span>
      </div>
    </div>
    <div class="text-xs text-gray-500">Compared to last month</div>
  </div>
  <!-- Card 2 -->
  <div class="bg-gradient-to-br from-blue-50 to-cyan-100 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center">
        <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center mr-3">
          <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
          </svg>
        </div>
        <div>
          <div class="text-2xl font-bold text-gray-900">8,765</div>
          <div class="text-sm text-gray-600">Website Visitors</div>
        </div>
      </div>
      <div class="flex items-center bg-blue-100 rounded-lg p-2">
        <svg class="w-4 h-4 text-blue-600 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
        </svg>
        <span class="text-xs text-blue-700 font-semibold">+8.2%</span>
      </div>
    </div>
    <div class="text-xs text-gray-500">Compared to last month</div>
  </div>
  <!-- Card 3 -->
  <div class="bg-gradient-to-br from-red-50 to-pink-100 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300">
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center">
        <div class="w-10 h-10 bg-red-500 rounded-lg flex items-center justify-center mr-3">
          <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
          </svg>
        </div>
        <div>
          <div class="text-2xl font-bold text-gray-900">2,345</div>
          <div class="text-sm text-gray-600">New Subscribers</div>
        </div>
      </div>
      <div class="flex items-center bg-red-100 rounded-lg p-2">
        <svg class="w-4 h-4 text-red-600 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
        </svg>
        <span class="text-xs text-red-700 font-semibold">-3.1%</span>
      </div>
    </div>
    <div class="text-xs text-gray-500">Compared to last month</div>
  </div>
</div>
<template>
  <!-- Comparison Stats Grid -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div v-for="stat in stats" :key="stat.id" :class="['rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300', stat.bgGradient]">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <div :class="['w-10 h-10 rounded-lg flex items-center justify-center mr-3', stat.iconBg]">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
            </svg>
          </div>
          <div>
            <div class="text-2xl font-bold text-gray-900">{{ stat.value }}</div>
            <div class="text-sm text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
        <div :class="['flex items-center rounded-lg p-2', stat.trendBg]">
          <svg :class="['w-4 h-4 mr-1', stat.trendColor]" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
          </svg>
          <span :class="['text-xs font-semibold', stat.trendTextColor]">{{ stat.trend }}</span>
        </div>
      </div>
      <div class="text-xs text-gray-500">Compared to last month</div>
    </div>
  </div>
</template>

<script setup>
const stats = [
  { id: 1, value: '$12,345', label: 'Monthly Revenue', bgGradient: 'bg-gradient-to-br from-green-50 to-emerald-100', iconBg: 'bg-green-500', trendBg: 'bg-green-100', trendColor: 'text-green-600', trendTextColor: 'text-green-700', trend: '+12.5%' },
  { id: 2, value: '8,765', label: 'Website Visitors', bgGradient: 'bg-gradient-to-br from-blue-50 to-cyan-100', iconBg: 'bg-blue-500', trendBg: 'bg-blue-100', trendColor: 'text-blue-600', trendTextColor: 'text-blue-700', trend: '+8.2%' },
  { id: 3, value: '2,345', label: 'New Subscribers', bgGradient: 'bg-gradient-to-br from-red-50 to-pink-100', iconBg: 'bg-red-500', trendBg: 'bg-red-100', trendColor: 'text-red-600', trendTextColor: 'text-red-700', trend: '-3.1%' }
]
</script>
import React from 'react'

export default function ComparisonStatsGrid() {
  const stats = [
    { id: 1, value: '$12,345', label: 'Monthly Revenue', bgGradient: 'bg-gradient-to-br from-green-50 to-emerald-100', iconBg: 'bg-green-500', trendBg: 'bg-green-100', trendColor: 'text-green-600', trendTextColor: 'text-green-700', trend: '+12.5%' },
    { id: 2, value: '8,765', label: 'Website Visitors', bgGradient: 'bg-gradient-to-br from-blue-50 to-cyan-100', iconBg: 'bg-blue-500', trendBg: 'bg-blue-100', trendColor: 'text-blue-600', trendTextColor: 'text-blue-700', trend: '+8.2%' },
    { id: 3, value: '2,345', label: 'New Subscribers', bgGradient: 'bg-gradient-to-br from-red-50 to-pink-100', iconBg: 'bg-red-500', trendBg: 'bg-red-100', trendColor: 'text-red-600', trendTextColor: 'text-red-700', trend: '-3.1%' }
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {stats.map(stat => (
        <div key={stat.id} className={`rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 ${stat.bgGradient}`}>
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center">
              <div className={`w-10 h-10 rounded-lg flex items-center justify-center mr-3 ${stat.iconBg}`}>
                <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
              </div>
              <div>
                <div className="text-2xl font-bold text-gray-900">{stat.value}</div>
                <div className="text-sm text-gray-600">{stat.label}</div>
              </div>
            </div>
            <div className={`flex items-center rounded-lg p-2 ${stat.trendBg}`}>
              <svg className={`w-4 h-4 mr-1 ${stat.trendColor}`} fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
              </svg>
              <span className={`text-xs font-semibold ${stat.trendTextColor}`}>{stat.trend}</span>
            </div>
          </div>
          <div className="text-xs text-gray-500">Compared to last month</div>
        </div>
      ))}
    </div>
  );
}

5. Neobrutalist Stats Grid

A grid of three bold neobrutalist stats cards with thick borders, heavy shadows, and vibrant colors for a raw, modern look.

1,234
Active Users
567
Page Views
89
Downloads
<!-- Neobrutalist Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Card 1 - Blue Neobrutalist -->
  <div class="bg-blue-500 border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] rounded-xl p-6 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 relative">
    <div class="absolute -top-3 -left-3 w-6 h-6 bg-yellow-400 border-2 border-black"></div>
    <div class="text-center">
      <div class="text-4xl font-black text-white mb-2">1,234</div>
      <div class="text-black font-bold text-lg">Active Users</div>
    </div>
  </div>
  <!-- Card 2 - Dark Neobrutalist -->
  <div class="bg-gray-900 border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] rounded-xl p-6 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 relative">
    <div class="absolute -top-3 -left-3 w-6 h-6 bg-red-500 border-2 border-black"></div>
    <div class="text-center">
      <div class="text-4xl font-black text-white mb-2">567</div>
      <div class="text-white font-bold text-lg">Page Views</div>
    </div>
  </div>
  <!-- Card 3 - Green Neobrutalist -->
  <div class="bg-green-500 border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] rounded-xl p-6 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 relative">
    <div class="absolute -top-3 -left-3 w-6 h-6 bg-purple-500 border-2 border-black"></div>
    <div class="text-center">
      <div class="text-4xl font-black text-white mb-2">89</div>
      <div class="text-black font-bold text-lg">Downloads</div>
    </div>
  </div>
</div>
<template>
  <!-- Neobrutalist Stats Grid -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div v-for="stat in stats" :key="stat.id" :class="['border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] rounded-xl p-6 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 relative', stat.bgClass]">
      <div :class="stat.accentClass"></div>
      <div class="text-center">
        <div :class="['text-4xl font-black mb-2', stat.textClass]">{{ stat.value }}</div>
        <div :class="['font-bold text-lg', stat.labelClass]">{{ stat.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
const stats = [
  { id: 1, value: '1,234', label: 'Active Users', bgClass: 'bg-blue-500', accentClass: 'absolute -top-3 -left-3 w-6 h-6 bg-yellow-400 border-2 border-black', textClass: 'text-white', labelClass: 'text-black' },
  { id: 2, value: '567', label: 'Page Views', bgClass: 'bg-gray-900', accentClass: 'absolute -top-3 -left-3 w-6 h-6 bg-red-500 border-2 border-black', textClass: 'text-white', labelClass: 'text-white' },
  { id: 3, value: '89', label: 'Downloads', bgClass: 'bg-green-500', accentClass: 'absolute -top-3 -left-3 w-6 h-6 bg-purple-500 border-2 border-black', textClass: 'text-white', labelClass: 'text-black' }
]
</script>
import React from 'react'

export default function NeobrutalistStatsGrid() {
  const stats = [
    { id: 1, value: '1,234', label: 'Active Users', bgClass: 'bg-blue-500', accentClass: 'absolute -top-3 -left-3 w-6 h-6 bg-yellow-400 border-2 border-black', textClass: 'text-white', labelClass: 'text-black' },
    { id: 2, value: '567', label: 'Page Views', bgClass: 'bg-gray-900', accentClass: 'absolute -top-3 -left-3 w-6 h-6 bg-red-500 border-2 border-black', textClass: 'text-white', labelClass: 'text-white' },
    { id: 3, value: '89', label: 'Downloads', bgClass: 'bg-green-500', accentClass: 'absolute -top-3 -left-3 w-6 h-6 bg-purple-500 border-2 border-black', textClass: 'text-white', labelClass: 'text-black' }
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {stats.map(stat => (
        <div key={stat.id} className={`border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] rounded-xl p-6 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,0.8)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 relative ${stat.bgClass}`}>
          <div className={stat.accentClass}></div>
          <div className="text-center">
            <div className={`text-4xl font-black mb-2 ${stat.textClass}`}>{stat.value}</div>
            <div className={`font-bold text-lg ${stat.labelClass}`}>{stat.label}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More