Tailwind CSS Academy · Lezione

Card delle statistiche e widget KPI

Crei una riga di card delle statistiche che mostri le metriche principali con icone colorate, indicatori di tendenza e percentuali di confronto, utilizzando utility grid e flex.

Card delle statistiche e widget KPI è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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.

Domande Frequenti

La lezione «Card delle statistiche e widget KPI» è gratuita?

Sì — il testo completo di «Card delle statistiche e widget KPI» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Card delle statistiche e widget KPI»?

Crei una riga di card delle statistiche che mostri le metriche principali con icone colorate, indicatori di tendenza e percentuali di confronto, utilizzando utility grid e flex. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Tailwind CSS Academy?

Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Card delle statistiche e widget KPI»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?

Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Tailwind CSS Academy