cardstatbeginner

Stat Card

A dashboard stat card showing a metric value, label, and trend indicator.

Preview

Total Revenue

$45,231

+12.5% from last month

<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 max-w-xs">
  <p class="text-sm font-medium text-gray-500 mb-1">Total Revenue</p>
  <p class="text-3xl font-bold text-gray-900">$45,231</p>
  <div class="flex items-center gap-1 mt-2">
    <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
    <span class="text-sm font-medium text-green-500">+12.5%</span>
    <span class="text-sm text-gray-400">from last month</span>
  </div>
</div>

Color Breakdown

Background

bg-white

#ffffff

Label

text-gray-500

#6b7280

Value

text-gray-900

#111827

Trend Up

text-green-500

#22c55e

Subtext

text-gray-400

#9ca3af

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-800 dark:border-gray-700 dark:text-white

Use Cases

Admin dashboardsAnalytics pagesKPI displays

Browser Support

All modern browsers.

Related Recipes

Glassmorphism Card

card - intermediate

Neumorphism Card

card - intermediate

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Pricing Card

card - intermediate

Testimonial Card

card - beginner

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 show a downward trend?▼

Rotate the arrow SVG with rotate-180 and change text-green-500 to text-red-500.