Cartões de estatísticas e widgets de KPI
Crie uma linha de cartões de estatísticas exibindo métricas importantes com ícones coloridos, indicadores de tendência e percentuais de comparação usando utilidades de grade e flexbox.
Cartões de estatísticas e widgets de KPI é uma aula grátis de Tailwind CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Tailwind CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Tailwind CSS Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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.
Perguntas Frequentes
A aula “Cartões de estatísticas e widgets de KPI” é grátis?
Sim — o texto completo de “Cartões de estatísticas e widgets de KPI” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Tailwind CSS Academy, atualize para CoddyKit PRO. O curso de Tailwind CSS Academy inclui 4 aulas no total.
O que vou aprender em “Cartões de estatísticas e widgets de KPI”?
Crie uma linha de cartões de estatísticas exibindo métricas importantes com ícones coloridos, indicadores de tendência e percentuais de comparação usando utilidades de grade e flexbox. Você pratica Tailwind CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Tailwind CSS Academy?
Nenhuma experiência prévia é necessária. Tailwind CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Cartões de estatísticas e widgets de KPI”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Tailwind CSS Academy?
Sim. Cada aula de Tailwind CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estrutura e barra lateral do painel
- Barra superior e trilhas de navegação
- Cartões de estatísticas e widgets de KPI
- Tabela de dados e espaços reservados para gráficos