Saltar al contenido

Construye un Panel de KPI en Vivo

Principiante~12 min0/4 pasos

Construye un Panel de KPI en Vivo

Todo gran panel de datos comienza con la misma estructura base: una cuadrícula limpia de tarjetas KPI que muestra de un vistazo los números que importan. En esta lección construirás esa estructura: el tipo de diseño al que una API alimentaría métricas en tiempo real.

Dispondrás una cuadrícula responsiva de tarjetas, cada una con una etiqueta de métrica, un valor grande y un indicador de tendencia. Lo estilizaremos como si una fuente de datos en vivo enviara números frescos cada pocos segundos.

Piensa como un analista: el objetivo es la legibilidad instantánea. Quien toma decisiones debe entender el estado del negocio en dos segundos. Construyamos el marco que hace eso posible.

Instrucciones

1

Agrega un encabezado con un h1 titulado «Live Metrics» para que los usuarios sepan que el panel está impulsado por una API.

Pista: Usa: `<h1 class="text-3xl font-bold">Live Metrics</h1>` dentro de un `<header>`.

¿Dónde va esto?

<!-- Build your KPI dashboard shell here -->

Escríbelo en la línea 11: debajo de ese comentario, después del código que ya añadiste.

2

Crea un contenedor de cuadrícula responsiva para las tarjetas KPI usando la clase grid.

3

Agrega tarjetas KPI como cajas estilizadas, incluyendo una para «Total Revenue».

4

Dale a cada tarjeta un fondo tipo tarjeta usando la clase bg-gray-800.

Tu código

html
13 líneas
1
2
3
4
5
6
7
8
9
10
11
12
13

Vista previa en vivo

Vista previa en vivo