Las tarjetas son componentes de interfaz de usuario versátiles que pueden mostrar una variedad de contenido como imágenes, texto y elementos interactivos como botones. Tailwind CSS proporciona una gama de utilidades que facilitan la creación y el diseño de componentes de tarjeta.

Estructura de la tarjeta

Un componente de tarjeta básico normalmente incluye los siguientes elementos: una imagen, un título, texto descriptivo y botones de acción.

Ya conocemos los elementos individuales de este componente, así que combinemos todo nuestro conocimiento en una tarjeta completa.

Explicación

1. max-w-sm: Establece el ancho máximo del elemento a tamaño pequeño (24rem o 384px);
2. rounded: Aplica esquinas redondeadas pequeñas al elemento;
3. overflow-hidden: Garantiza que cualquier contenido que desborde los límites del elemento quede oculto;
4. shadow-lg: Aplica una sombra de caja grande al elemento.

1. w-full: Establece el ancho de la imagen al 100% de su contenedor;
2. px-6: Agrega un relleno horizontal de 1.5rem (24px) tanto a la izquierda como a la derecha;
3. py-4: Agrega un relleno vertical de 1rem (16px) tanto en la parte superior como en la inferior;
4. font-bold: Aplica un peso de fuente en negrita;
5. text-xl: Establece el tamaño de fuente en xl (1.25rem o 20px);
6. mb-2: Agrega un margen inferior de 0.5rem (8px);
7. text-gray-700: Establece el color del texto en un gris medio;
8. text-base: Establece el tamaño de fuente en base (1rem o 16px).

1. px-6: Agrega un relleno horizontal de 1.5rem (24px) tanto a la izquierda como a la derecha;
2. pt-4: Agrega un relleno superior de 1rem (16px);
3. pb-2: Agrega un relleno inferior de 0.5rem (8px);
4. bg-blue-500: Establece el color de fondo a un tono de azul;
5. hover:bg-blue-700: Cambia el color de fondo a un tono más oscuro de azul al pasar el cursor;
6. text-white: Establece el color del texto en blanco;
7. font-bold: Aplica un peso de fuente en negrita;
8. py-2: Agrega un relleno vertical de 0.5rem (8px);
9. px-4: Agrega un relleno horizontal de 1rem (16px);
10. rounded: Aplica esquinas ligeramente redondeadas al botón;
11. bg-gray-500: Establece el color de fondo a un tono de gris;
12. hover:bg-gray-700: Cambia el color de fondo a un tono más oscuro de gris al pasar el cursor;
13. text-white: Establece el color del texto en blanco;
14. font-bold: Aplica un peso de fuente en negrita;
15. py-2: Agrega un relleno vertical de 0.5rem (8px);
16. px-4: Agrega un relleno horizontal de 1rem (16px);
17. rounded: Aplica esquinas ligeramente redondeadas al botón;
18. ml-2: Agrega un margen izquierdo de 0.5rem (8px).

Como puedes observar, ya se han considerado todas las clases utilitarias. Ahora, combinamos todo en un solo componente de tarjeta.

Agreguemos una sección más al ejemplo anterior, que será badges.

Explicación - Insignias

1. px-6: Añade un relleno horizontal de 1.5rem (24px) tanto a la izquierda como a la derecha;
2. pt-4: Añade un relleno superior de 1rem (16px);
3. pb-2: Añade un relleno inferior de 0.5rem (8px);
4. inline-block: Muestra el elemento como un contenedor de bloque en línea;
5. bg-gray-200: Establece el color de fondo a gris claro;
6. rounded-full: Aplica esquinas completamente redondeadas al elemento;
7. px-3: Añade un relleno horizontal de 0.75rem (12px) tanto a la izquierda como a la derecha;
8. py-1: Añade un relleno vertical de 0.25rem (4px) tanto en la parte superior como en la inferior;
9. text-sm: Establece el tamaño de fuente a pequeño (0.875rem o 14px);
10. font-semibold: Aplica un peso de fuente seminegrita;
11. text-gray-700: Establece el color del texto a gris medio;
12. mr-2: Añade un margen derecho de 0.5rem (8px);
13. mb-2: Añade un margen inferior de 0.5rem (8px).

Nota

Toda la información detallada sobre el componente Card se puede encontrar aquí.