Kartu Statistik dan Widget KPI
Buat deretan kartu statistik yang menampilkan metrik utama dengan ikon berwarna, indikator tren, dan persentase perbandingan menggunakan utilitas kisi serta flex.
Kartu Statistik dan Widget KPI adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Kartu Statistik dan Widget KPI” gratis?
Ya — teks lengkap “Kartu Statistik dan Widget KPI” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Kartu Statistik dan Widget KPI”?
Buat deretan kartu statistik yang menampilkan metrik utama dengan ikon berwarna, indikator tren, dan persentase perbandingan menggunakan utilitas kisi serta flex. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Kartu Statistik dan Widget KPI” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Kerangka Dasbor dan Bilah Samping
- Bilah Atas dan Breadcrumb
- Kartu Statistik dan Widget KPI
- Tabel Data dan Placeholder Grafik