Cartes de statistiques et widgets KPI
Créez une rangée de cartes de statistiques affichant des indicateurs clés avec des icônes colorées, des indicateurs de tendance et des pourcentages de comparaison à l’aide d’utilitaires de grille et de flexbox.
Cartes de statistiques et widgets KPI est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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 →
</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.
Questions Fréquemment Posées
La leçon « Cartes de statistiques et widgets KPI » est-elle gratuite ?
Oui — le texte complet de « Cartes de statistiques et widgets KPI » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Cartes de statistiques et widgets KPI » ?
Créez une rangée de cartes de statistiques affichant des indicateurs clés avec des icônes colorées, des indicateurs de tendance et des pourcentages de comparaison à l’aide d’utilitaires de grille et… Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Cartes de statistiques et widgets KPI » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Structure du tableau de bord et barre latérale
- Barre supérieure et fil d’Ariane
- Cartes de statistiques et widgets KPI
- Tableau de données et espaces réservés pour graphiques