Modèles de composants carte
Créez des cartes avec en-têtes contenant des images, corps de contenu et pieds de page d’actions, au moyen de dispositions flex et grid dans un conteneur arrondi avec ombre.
Modèles de composants carte est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Modèles de composants carte » est-elle gratuite ?
Oui — le texte complet de « Modèles de composants carte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modèles de composants carte » ?
Créez des cartes avec en-têtes contenant des images, corps de contenu et pieds de page d’actions, au moyen de dispositions flex et grid dans un conteneur arrondi avec ombre. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Modèles de composants carte » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Variantes et états des boutons
- Modèles de composants carte
- Composants badge et étiquette
- Combiner des composants dans une interface