Patrones de componentes de tarjeta
Construya tarjetas con encabezados de imagen, cuerpos de contenido y pies de acciones utilizando diseños flex y grid dentro de un contenedor redondeado con sombra.
Patrones de componentes de tarjeta es una lección gratuita de Tailwind CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Tailwind CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
What Makes a Card Component
A card is a self-contained rectangular surface that groups related content. Cards typically include three zones: a header (often an image or colored strip), a body (title, description, metadata), and an optional footer (action buttons).
In Tailwind, the base card shell uses bg-white rounded-xl shadow-md overflow-hidden to create a white surface with rounded corners, a drop shadow for depth, and clipped corners for any inner images.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<!-- Card content goes here -->
</div>Card With Image Header
The most common card pattern features an image header that spans the full width above the content. Use w-full h-48 object-cover on the <img> tag to fill the width and crop the height consistently regardless of the original image dimensions.
This approach ensures all cards in a grid look uniform even when source images have varying aspect ratios.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<img
src="photo.jpg"
alt="Mountain landscape"
class="w-full h-48 object-cover"
/>
<div class="p-5">
<h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
<p class="mt-1 text-sm text-gray-500">Short description of the card content.</p>
</div>
</div>Card Body Typography Hierarchy
Inside the card body, establish a clear typographic hierarchy to guide the reader's eye. A bold title with text-lg font-bold text-gray-900 commands attention, while a subtitle uses text-sm text-gray-500 for secondary information.
Use mt-2 between elements for consistent vertical rhythm, and line-clamp-2 (from the typography plugin) to truncate long descriptions to exactly two lines, keeping card heights uniform in a grid.
<div class="p-5">
<span class="text-xs font-semibold uppercase tracking-wide text-blue-600">Tutorial</span>
<h3 class="mt-1 text-xl font-bold text-gray-900">Getting Started with Tailwind</h3>
<p class="mt-2 text-sm text-gray-600 line-clamp-2">
Learn how to set up Tailwind CSS and build your first responsive layout using utility classes.
</p>
</div>Card Footer With Actions
The card footer contains action buttons or metadata like author and date. Use a border-t border-gray-100 to visually separate the footer from the body, and flex items-center justify-between px-5 py-3 to space the content horizontally.
This three-zone structure (image, body, footer) is the backbone of product cards, blog post cards, and dashboard widgets.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Card Title</h3>
<p class="mt-2 text-sm text-gray-600">A brief description of this card's content.</p>
</div>
<div class="border-t border-gray-100 flex items-center justify-between px-5 py-3">
<span class="text-xs text-gray-400">June 2026</span>
<button class="text-sm font-semibold text-blue-600 hover:text-blue-700">Read More</button>
</div>
</div>Horizontal Card Layout
For wider content areas, a horizontal card places the image on the left and the content on the right. Use flex on the card container and w-40 flex-shrink-0 on the image wrapper to keep the image a fixed width while the content expands.
This pattern is excellent for blog post lists, search result items, and notification feeds.
<div class="flex bg-white rounded-xl shadow-md overflow-hidden">
<div class="flex-shrink-0">
<img src="photo.jpg" alt="" class="w-40 h-full object-cover" />
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Horizontal Card</h3>
<p class="mt-2 text-sm text-gray-600">Image on the left, content expanding on the right.</p>
<button class="mt-3 text-sm font-semibold text-blue-600 hover:underline">View Article</button>
</div>
</div>Card Hover Effects
Adding a hover effect to a card signals interactivity and improves user experience. A common pattern is to lift the card with a larger shadow on hover using hover:shadow-xl, combined with a smooth upward translate using hover:-translate-y-1.
The transition-all duration-200 class ensures both the shadow and transform animate smoothly. Add cursor-pointer to reinforce that the card is clickable.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm
cursor-pointer transition-all duration-200
hover:shadow-xl hover:-translate-y-1">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Hoverable Card</h3>
<p class="mt-2 text-sm text-gray-600">Hover over me to see the lift effect.</p>
</div>
</div>Card Grid Layout
Cards almost always appear in grids. Use grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 on a wrapper element to create a responsive grid that shows one column on mobile, two on tablet, and three on desktop.
The gap-6 utility adds consistent spacing between cards without needing margins on individual cards, which would break grid alignment.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="a.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card One</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="b.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card Two</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="c.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card Three</h3>
</div>
</div>
</div>Profile and Avatar Cards
A profile card centers an avatar, name, role, and social links. Use a colored header band with h-24 bg-gradient-to-r from-blue-500 to-purple-600, then position the avatar to overlap the band with a negative top margin: -mt-12 mx-auto on a circular image.
This offset technique creates a layered visual effect without any absolute positioning.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-xs text-center">
<div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600"></div>
<div class="px-5 pb-5">
<img
src="avatar.jpg"
alt="Profile"
class="w-20 h-20 rounded-full border-4 border-white -mt-10 mx-auto object-cover"
/>
<h3 class="mt-2 text-lg font-bold text-gray-900">Jane Doe</h3>
<p class="text-sm text-gray-500">Frontend Developer</p>
<button class="mt-4 px-6 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">
Follow
</button>
</div>
</div>Stat and Metric Cards
Stat cards display a single key metric with an icon, number, and label. Keep them compact with p-5 padding and use flex items-center justify-between to position the icon on the right and the stat on the left.
Color-code the icon background to differentiate metrics at a glance. A green icon for revenue, blue for users, and orange for conversions creates an immediately scannable dashboard.
<div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-between">
<div>
<p class="text-sm text-gray-500 font-medium">Total Users</p>
<p class="mt-1 text-3xl font-bold text-gray-900">12,489</p>
<p class="mt-1 text-sm text-green-600 font-medium">+8.2% this month</p>
</div>
<div class="p-3 bg-blue-100 rounded-xl">
<svg class="w-7 h-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/>
</svg>
</div>
</div>Dark Mode Card Styling
Cards in dark mode require inverting backgrounds and adjusting text colors. Use dark:bg-gray-800 in place of bg-white, dark:text-white for headings, and dark:text-gray-400 for secondary text.
Border-based dividers also need adjustment: dark:border-gray-700 replaces border-gray-100. Apply all dark variants alongside their light counterparts so the card looks great in both themes.
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden max-w-sm">
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Dark-Mode Ready</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
This card adapts automatically to the user's preferred color scheme.
</p>
</div>
<div class="border-t border-gray-100 dark:border-gray-700 px-5 py-3 flex justify-end">
<button class="text-sm font-semibold text-blue-500 hover:text-blue-400">Action</button>
</div>
</div>Clickable Card as a Link
Wrapping an entire card in an <a> tag makes the whole surface clickable. Combine block with the card styles so the anchor behaves as a block element. Use group on the anchor to enable child hover effects — for example, group-hover:text-blue-600 on the title changes color when anywhere on the card is hovered.
This pattern avoids nested interactive elements (buttons inside links) and keeps the card accessible as a single focusable unit.
<a href="/post/tailwind-tips" class="group block bg-white rounded-xl shadow-md overflow-hidden
hover:shadow-xl transition-shadow duration-200">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
Tailwind Tips and Tricks
</h3>
<p class="mt-2 text-sm text-gray-500">Click anywhere on this card to navigate.</p>
</div>
</a>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: the three-zone card structure (image header, body, footer) built with rounded corners and shadow utilities; hover lift effects combining hover:shadow-xl hover:-translate-y-1 transition-all; and responsive card grids using grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6. Next up we explore badge and tag components.
Preguntas frecuentes
¿La lección «Patrones de componentes de tarjeta» es gratis?
Sí — el texto completo de «Patrones de componentes de tarjeta» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Tailwind CSS Academy, actualiza a CoddyKit PRO. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Patrones de componentes de tarjeta»?
Construya tarjetas con encabezados de imagen, cuerpos de contenido y pies de acciones utilizando diseños flex y grid dentro de un contenedor redondeado con sombra. Practicas Tailwind CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Tailwind CSS Academy?
No se requiere experiencia previa. Tailwind CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Patrones de componentes de tarjeta»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Tailwind CSS Academy?
Sí. Cada lección de Tailwind CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Variantes y estados de botones
- Patrones de componentes de tarjeta
- Componentes de insignias y etiquetas
- Combinación de componentes en una interfaz