Build a Live KPI Dashboard Shell
Build a Live KPI Dashboard Shell
Every great data dashboard starts with the same backbone: a clean grid of KPI cards that surface the numbers that matter at a glance. In this lesson you'll build that shell—the kind of layout an API would feed real-time metrics into.
You'll lay out a responsive grid of cards, each showing a metric label, a big value, and a trend indicator. We'll style it as if a live data source is pushing fresh numbers every few seconds.
Think like an analyst: the goal is instant readability. A decision-maker should grasp the state of the business in two seconds. Let's build the frame that makes that possible.
Instructions
Add a header with an h1 titled "Live Metrics" so users know the dashboard is API-driven.
Hint: Use: `<h1 class="text-3xl font-bold">Live Metrics</h1>` inside a `<header>`.
Where does this go?
<!-- Build your KPI dashboard shell here -->Write it on line 11 — under that comment, after the code you already added.
Create a responsive grid container for the KPI cards using the grid class.
Add KPI cards as styled boxes, including one for "Total Revenue".
Give each card a card-like background using the bg-gray-800 class.
Your Code
Describe what you want to build for this step and I'll write the code — then click Apply to drop it into your editor. This step: Add a header with an h1 titled "Live Metrics" so users know the dashboard is API-driven.