ALUMNO

Tailwind

El estilo de cada cosa

Reconoce

Pregunta 1 de 5

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Comprar
</button>

¿Qué clase hace que el fondo del botón sea azul?

1
Domina flexbox
Coloca las cajas en posiciones exactas usando solo clases de Tailwind
Pendiente

Sub-reto 1 de 3

Coloca las 4 cajas en una fila horizontal centrada, con espacio uniforme entre ellas.

<div class="[tus clases aquí]">
  <div class="w-12 h-12 bg-purple-500 rounded"></div>
  <div class="w-12 h-12 bg-purple-500 rounded"></div>
  <div class="w-12 h-12 bg-purple-500 rounded"></div>
  <div class="w-12 h-12 bg-purple-500 rounded"></div>
</div>
2
Construye con grid
Crea layouts de rejilla usando CSS Grid con Tailwind
Pendiente

Sub-reto 1 de 2

Crea un grid de 3 columnas con espacio de 4 unidades entre celdas.

<div class="[tus clases aquí]">
  <div class="bg-purple-500 h-20 rounded"></div>
  <div class="bg-purple-500 h-20 rounded"></div>
  <div class="bg-purple-500 h-20 rounded"></div>
  <div class="bg-purple-500 h-20 rounded"></div>
  <div class="bg-purple-500 h-20 rounded"></div>
  <div class="bg-purple-500 h-20 rounded"></div>
</div>
3
Clona la card de pricing
Reproduce exactamente el diseño de la derecha modificando las clases de Tailwind
Pendiente

Modifica las clases del código de la izquierda hasta que la card se vea igual que la de la derecha. No tienes que acertar las clases exactas, solo que el resultado visual sea equivalente.

4
Añade modo oscuro
Haz que esta card cambie entre modo claro y oscuro añadiendo los modificadores dark: correctos
Pendiente

Añade modificadores dark: a las clases para que la card cambie de aspecto cuando actives el modo oscuro. Usa el toggle de arriba del preview para ir probando. El objetivo es que en modo oscuro, el fondo sea gris oscuro, el texto sea claro y el botón invierta sus colores.

Los modificadores dark: van delante de cualquier clase y se aplican solo cuando el modo oscuro está activo. Por ejemplo, dark:bg-gray-900 hace el fondo gris oscuro solo en ese modo.

Recursos
Documentación y material de apoyo para este reto
Documentación oficial
Tailwind CSS Docs
Cheatsheet visual
Cheatsheet oficial de clases
Vídeo de la sesión
Sesión 3.2 del módulo
Estado del reto