Tailwind CSS Academy · Lesson

Stat Cards and KPI Widgets

Create a row of stat cards displaying key metrics with colored icons, trend indicators, and comparison percentages using grid and flex utilities.

Stat Cards and KPI Widgets is a free Tailwind CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

KPI Cards Purpose and Placement

KPI (Key Performance Indicator) cards, also called stat cards or metric widgets, display high-level numbers at the top of a dashboard. They give users an instant snapshot of the most important metrics — revenue, active users, conversion rate — without needing to scroll or drill into tables. They are always the first thing users see on a dashboard page.

<!-- Stat cards positioned at the top of dashboard main content -->
<main class="flex-1 overflow-y-auto bg-gray-100 p-6">
  <!-- KPI cards row -->
  <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
    <!-- Card 1: Total Revenue -->
    <!-- Card 2: Active Users -->
    <!-- Card 3: Conversion Rate -->
    <!-- Card 4: Open Tickets -->
  </div>
  <!-- Charts and tables below -->
</main>

Basic Stat Card Structure

Each stat card has four elements: a label (metric name), a value (the big number), a trend indicator (percentage change), and an optional icon. Place all of these inside a white rounded card: rounded-xl bg-white p-6 shadow-sm. Use flex column or flex row layouts within the card depending on whether the icon sits on the side or above the value.

<div class="rounded-xl bg-white p-6 shadow-sm">
  <div class="flex items-center justify-between">
    <!-- Label -->
    <p class="text-sm font-medium text-gray-500">Total Revenue</p>
    <!-- Icon -->
    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
      <svg class="h-5 w-5 text-blue-600"><!-- currency icon --></svg>
    </div>
  </div>
  <!-- Value -->
  <p class="mt-4 text-3xl font-bold tracking-tight text-gray-900">$48,295</p>
  <!-- Trend -->
  <p class="mt-1 text-sm text-green-600">
    <span class="font-semibold">+12.5%</span> vs last month
  </p>
</div>

Color-Coded Trend Indicators

Make trends visually scannable with color coding: green for positive changes and red for negative. Use text-green-600 with an upward arrow icon for gains and text-red-500 with a downward arrow for losses. For neutral or unchanged metrics use text-gray-500. Always include the raw number alongside the percentage for context.

<!-- Positive trend -->
<div class="mt-2 flex items-center gap-1 text-sm text-green-600">
  <svg class="h-4 w-4" 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"/>
  </svg>
  <span class="font-semibold">+12.5%</span>
  <span class="text-gray-500">from last month</span>
</div>

<!-- Negative trend -->
<div class="mt-2 flex items-center gap-1 text-sm text-red-500">
  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
  </svg>
  <span class="font-semibold">-3.2%</span>
  <span class="text-gray-500">from last month</span>
</div>

Icon Color Themes Per Metric

Assign a distinct icon color theme to each stat card to improve scannability. Revenue gets blue, users get purple, conversion gets green, and support tickets get orange or red. Each icon sits in a rounded circle with a light version of its color as the background and the solid color as the icon fill. This color coding persists wherever the metric appears across the dashboard.

<!-- Revenue: blue -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
  <svg class="h-5 w-5 text-blue-600"><!-- icon --></svg>
</div>

<!-- Users: purple -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
  <svg class="h-5 w-5 text-purple-600"><!-- icon --></svg>
</div>

<!-- Conversion: green -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
  <svg class="h-5 w-5 text-green-600"><!-- icon --></svg>
</div>

<!-- Tickets: orange -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-orange-100">
  <svg class="h-5 w-5 text-orange-600"><!-- icon --></svg>
</div>

Sparkline Mini Chart in Stat Card

Adding a mini sparkline chart below the metric value provides at-a-glance trend data without needing to open a full chart. A simple SVG polyline serves as a lightweight sparkline. Alternatively, a tiny bar chart built from a flex gap-0.5 items-end container where each bar is a w-1 div with varying heights gives a bar sparkline effect using only Tailwind.

<!-- CSS bar sparkline -->
<div class="mt-4">
  <div class="flex h-10 items-end gap-0.5">
    <div class="w-2 rounded-sm bg-blue-200" style="height: 40%"></div>
    <div class="w-2 rounded-sm bg-blue-200" style="height: 55%"></div>
    <div class="w-2 rounded-sm bg-blue-200" style="height: 35%"></div>
    <div class="w-2 rounded-sm bg-blue-200" style="height: 65%"></div>
    <div class="w-2 rounded-sm bg-blue-200" style="height: 80%"></div>
    <div class="w-2 rounded-sm bg-blue-400" style="height: 70%"></div>
    <div class="w-2 rounded-sm bg-blue-600" style="height: 90%"></div>
  </div>
</div>

Progress Bar Stat Card

For goals and quotas, a progress bar inside a stat card visually shows how close the metric is to its target. Use a gray background track h-2 rounded-full bg-gray-100 with a colored filled bar inside. The fill width is set with an inline style percentage or with Tailwind arbitrary values like w-[73%]. Include the goal label and percentage text below or above the bar.

<div class="rounded-xl bg-white p-6 shadow-sm">
  <p class="text-sm font-medium text-gray-500">Monthly Goal</p>
  <p class="mt-4 text-3xl font-bold text-gray-900">$36,450</p>
  <p class="mt-1 text-sm text-gray-500">of $50,000 goal</p>
  <!-- Progress bar -->
  <div class="mt-4">
    <div class="h-2 rounded-full bg-gray-100">
      <div class="h-2 w-[73%] rounded-full bg-blue-600"></div>
    </div>
    <p class="mt-1 text-right text-xs text-gray-400">73% complete</p>
  </div>
</div>

Responsive Stat Card Grid

Stat cards should adapt gracefully to different screen sizes. Start with a single column on mobile (grid-cols-1), switch to two columns on medium screens (sm:grid-cols-2), and expand to four on extra-large screens (xl:grid-cols-4). On tablets with two columns, cards may appear taller — ensure the card layout still reads well in a two-column arrangement.

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
  <!-- On mobile: 1 card per row (full width) -->
  <!-- On sm (640px): 2 cards per row -->
  <!-- On xl (1280px): 4 cards per row -->
  <div class="rounded-xl bg-white p-6 shadow-sm"><!-- Revenue --></div>
  <div class="rounded-xl bg-white p-6 shadow-sm"><!-- Users --></div>
  <div class="rounded-xl bg-white p-6 shadow-sm"><!-- Conversion --></div>
  <div class="rounded-xl bg-white p-6 shadow-sm"><!-- Tickets --></div>
</div>

Stat Card With Comparison Period

Allow users to contextualize the metric by showing a comparison period selector inside or near the stat card. A small pill segmented control lets users switch between Today, 7D, 30D, and All time. This adds interactivity without cluttering the card — the selector can be a shared control above all cards that affects the entire row simultaneously.

<!-- Period selector above stat cards -->
<div class="mb-6 flex items-center justify-between">
  <h2 class="text-lg font-bold text-gray-900">Overview</h2>
  <div class="flex rounded-lg border border-gray-200 bg-white">
    <button class="rounded-l-lg border-r border-gray-200 px-3 py-1.5 text-xs
                   font-medium text-gray-500 hover:bg-gray-50">Today</button>
    <button class="border-r border-gray-200 px-3 py-1.5 text-xs
                   font-medium text-blue-600 bg-blue-50">7D</button>
    <button class="border-r border-gray-200 px-3 py-1.5 text-xs
                   font-medium text-gray-500 hover:bg-gray-50">30D</button>
    <button class="rounded-r-lg px-3 py-1.5 text-xs
                   font-medium text-gray-500 hover:bg-gray-50">All time</button>
  </div>
</div>

Loading Skeleton for Stat Cards

While KPI data loads from an API, display skeleton placeholders to prevent layout shift and communicate that content is coming. Replace the number and label with gray animated blocks using Tailwind's animate-pulse. Skeleton elements use rounded bg-gray-200 with fixed heights to mimic the real card layout dimensions.

<!-- Skeleton stat card -->
<div class="rounded-xl bg-white p-6 shadow-sm animate-pulse">
  <div class="flex items-center justify-between">
    <div class="h-4 w-24 rounded bg-gray-200"></div>
    <div class="h-10 w-10 rounded-full bg-gray-200"></div>
  </div>
  <div class="mt-4 h-8 w-32 rounded bg-gray-200"></div>
  <div class="mt-2 h-3 w-28 rounded bg-gray-200"></div>
</div>

Clickable Stat Cards

Make stat cards clickable to navigate to the detailed view for that metric. Wrap the card in an anchor or add a subtle View details link at the bottom. Use group on the card container and group-hover:underline on the details link to reveal the link only on hover — a clean progressive disclosure pattern that avoids cluttering the card at rest.

<a href="/analytics/revenue"
   class="group block rounded-xl bg-white p-6 shadow-sm
          transition hover:shadow-md">
  <div class="flex items-center justify-between">
    <p class="text-sm font-medium text-gray-500">Total Revenue</p>
    <!-- Icon -->
  </div>
  <p class="mt-4 text-3xl font-bold text-gray-900">$48,295</p>
  <p class="mt-1 text-sm text-green-600 font-semibold">+12.5%</p>
  <!-- Hover-revealed detail link -->
  <p class="mt-3 text-xs text-blue-600 opacity-0 transition group-hover:opacity-100">
    View full report &rarr;
  </p>
</a>

Dark Mode Stat Cards

Adapt stat cards for dark mode by inverting surface and text colors. The card background changes from bg-white to dark:bg-gray-800, the value text from text-gray-900 to dark:text-white, and icon containers from light to dark variants. The trend colors (green/red) generally look fine in both modes, but verify contrast ratios since light green on dark backgrounds can fail WCAG standards.

<div class="rounded-xl bg-white p-6 shadow-sm dark:bg-gray-800">
  <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Revenue</p>
  <p class="mt-4 text-3xl font-bold text-gray-900 dark:text-white">$48,295</p>
  <!-- Icon container -->
  <div class="flex h-10 w-10 items-center justify-center
              rounded-full bg-blue-100 dark:bg-blue-900">
    <svg class="h-5 w-5 text-blue-600 dark:text-blue-400"><!-- icon --></svg>
  </div>
</div>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: building KPI stat cards with icons, trend indicators, and color coding, adding progress bars and sparklines for richer metric visualization, and creating skeleton loaders with animate-pulse for graceful loading states. Next up we build the data table and chart placeholder widgets.

Frequently asked questions

Is the “Stat Cards and KPI Widgets” lesson free?

Yes — the full text of “Stat Cards and KPI Widgets” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Stat Cards and KPI Widgets”?

Create a row of stat cards displaying key metrics with colored icons, trend indicators, and comparison percentages using grid and flex utilities. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Tailwind CSS Academy?

No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Stat Cards and KPI Widgets” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Tailwind CSS Academy lesson?

Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Tailwind CSS Academy