Diseñar cards atractivas con Tailwind CSS es uno de esos ejercicios que combinan estructura HTML, control de tamaños proporcionales y detalles visuales como sombras, bordes redondeados e imágenes de fondo. Si estás armando una sección de recomendaciones para un sitio web, aquí tienes el recorrido completo para construir una card limpia, ordenada y reutilizable.

¿Cómo se estructura una card en Tailwind CSS?

La base de toda card bien hecha empieza por su esqueleto HTML. La idea es simple: un contenedor exterior que envuelve dos divs internos, uno para la imagen y otro para el texto.

Dentro de la sección de recomendados, el div principal funciona como caja general. Adentro viven dos hijos: el primero alojará la imagen de fondo y el segundo, el bloque de título y descripción. Esta separación te permite controlar proporciones, colores y bordes de manera independiente.

Al contenedor exterior se le aplican utilidades como w-48 y h-64 para fijar el ancho y alto, además de un bg temporal que ayuda a visualizar el espacio mientras lo construyes. Sumarle un shadow-md y un rounded-lg desde el inicio te da una pista visual del volumen final, sobre todo cuando algunas cards serán blancas y otras de colores.

¿Qué hace la clase rounded-lg en Tailwind? Aplica un border radius grande a las esquinas del elemento. Si usas rounded-t-lg solo redondea las esquinas superiores y con rounded-b-lg solo las inferiores. [01:50]

¿Cómo dividir la card en proporciones con fracciones de Tailwind?

La parte visual más interesante es el reparto de espacio entre la imagen y el texto. Aquí entran las fracciones de altura que ofrece Tailwind.

Al primer div interno se le asigna w-full y h-3/5, es decir, ocupa el 100% del ancho y tres quintos del alto total de la card. Al segundo div se le da h-2/5 para completar la proporción y evitar que el contenido crezca de forma descontrolada.

Esta lógica de fracciones es clave: si dejas un h-full sin medida concreta, el div se expande sin control y desordena el documento. Asignar dos quintos exactos cierra la composición y mantiene la card estable.

¿Cómo poner una imagen de fondo en una card con Tailwind?

Para la mitad superior, en vez de usar la etiqueta <img>, la imagen se aplica como background. Esto da más control sobre el recorte y el comportamiento visual.

Los pasos concretos son:

• Asignar la clase de background con la ruta de la imagen, por ejemplo Norway para el caso de Noruega.
• Aplicar bg-cover para que la imagen se ajuste sin deformarse y conserve sus proporciones.
• Volver a colocar rounded-t-lg en este div, porque al pintar la imagen se pierden las esquinas redondeadas heredadas.

La propiedad bg-cover es la que evita que la imagen haga resize extraño dentro del contenedor: la mantiene íntegra y solo la escala lo necesario para cubrir el área. [05:20]

¿Para qué sirve bg-cover en Tailwind? Hace que la imagen de fondo cubra todo el contenedor sin distorsionarse, recortando lo que sobre en lugar de estirarla.

¿Cómo estilizar el bloque de texto de la card?

La mitad inferior aloja el título y la descripción. Aquí el color de fondo viene de la configuración personalizada de Tailwind, donde está definido el color secondary.

Un detalle importante: ese color no se aplica si el div no tiene dimensiones. Por eso primero se asigna w-full y la altura proporcional h-2/5, y después sí se ve el color funcionando.

Dentro de este bloque se agregan dos etiquetas <p>: una para el nombre del destino, como Noruega, y otra para la descripción, paisajes increíbles. Las clases que les dan jerarquía visual son:

• text-white en ambos párrafos para que contrasten con el fondo.
• text-xl y font-bold en el título para destacarlo.
• text-base o un tamaño medium en la descripción para mantener legibilidad sin competir con el título.

El espaciado interno se logra con px para el eje horizontal y py-2 para el eje vertical. Tailwind permite aplicar padding por eje con px y py, lo que evita tener que escribir cuatro propiedades separadas.

¿Cómo recuperar el border radius perdido en la parte inferior?

Al segundo div hay que agregarle rounded-b-lg. Sin esta clase, la base de la card queda con esquinas rectas y rompe la armonía con la parte superior redondeada.

¿Qué papel juegan las sombras en el diseño de cards?

La sombra es el detalle que da profundidad y separa la card del fondo de la página. En este caso se usa shadow-md, aunque se puede subir a shadow-lg según el gusto.

La recomendación es probar varios niveles antes de decidir: una sombra muy tenue puede pasar desapercibida y una muy fuerte distrae. El medio queda equilibrado para tarjetas que conviven en una grilla de recomendaciones.

Con padding bien repartido, proporciones definidas con fracciones, imagen como background y bordes redondeados arriba y abajo, la card queda lista para replicarse con otros destinos. Anímate a experimentar con colores, tipografías y tamaños, y comparte en los comentarios qué variantes creaste.