Tailwind CSS Cards : cartes responsives et élégantes

Introduction à Tailwind CSS et les cards

Tailwind CSS est un framework CSS utilitaire qui permet de construire des interfaces rapidement sans quitter le HTML. Les cards sont des composants fondamentaux pour afficher du contenu.

À retenir : Tailwind cards = utility classes pour builder rapidement. Pas de composants pré-faits, totale flexibilité.

Pourquoi utiliser Tailwind pour les cards :

Développement rapide sans CSS personnalisé
Responsive par défaut avec breakpoints
Thème cohérent (spacing, shadows, etc.)
Fichier CSS ultra-optimisé (purge unused styles)
Écosystème Headless UI pour composants avancés

Structure basique d'une card

Card simple :

<div class="bg-white rounded-lg shadow p-6">
    <h3 class="text-xl font-bold mb-2">Titre de la card</h3>
    <p class="text-gray-600">Description du contenu...</p>
    <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        Action
    </button>
</div>

Explication des classes :

bg-white : fond blanc
rounded-lg : coins arrondis
shadow : ombre
p-6 : padding (24px)
text-xl : taille texte 20px
font-bold : gras
text-gray-600 : couleur grise

Système d'espacement Tailwind : p-6 = 24px (6 × 4px). m-2 = 8px, mb-4 = 16px bottom margin, etc.

Cards responsives et breakpoints

Breakpoints Tailwind :

sm = 640px
md = 768px
lg = 1024px
xl = 1280px
2xl = 1536px

Grid responsive de cards :

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    <div class="bg-white rounded-lg shadow p-6">
        Card 1
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        Card 2
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        Card 3
    </div>
</div>

Explication :

Mobile (par défaut) : 1 colonne
sm (≥640px) : 2 colonnes
md (≥768px) : 3 colonnes
gap-6 : espacement entre cards = 24px

À retenir : Grid + breakpoints = responsive automatique sans media queries.

Cards avec images et shadows

Card avec image couvrant le haut :

<div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <!-- Image -->
    <img src="image.jpg" alt="Card image" class="w-full h-48 object-cover">

    <!-- Contenu -->
    <div class="p-6">
        <h3 class="text-xl font-bold mb-2">Titre</h3>
        <p class="text-gray-600 text-sm">Description...</p>
    </div>
</div>

Shadows disponibles :

shadow-sm      <!-- Léger -->
shadow          <!-- Défaut -->
shadow-md       <!-- Moyen -->
shadow-lg       <!-- Large -->
shadow-xl       <!-- Extra large -->
shadow-2xl      <!-- Géant -->
shadow-none     <!-- Pas d'ombre -->

<!-- Hover avec animation -->
class="shadow hover:shadow-xl transition"

Object cover pour images :

object-cover : remplit le conteneur, peut être croppée
object-contain : entre entièrement, peut avoir du vide
object-fill : remplit sans respecter ratio (peut être distordue)

Cards avec badges et states

Card avec badge :

<div class="bg-white rounded-lg shadow p-6 relative">
    <!-- Badge positionné -->
    <span class="absolute top-3 right-3 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold">
        NEW
    </span>

    <h3 class="text-xl font-bold mt-8">Titre</h3>
    <p class="text-gray-600">Description...</p>
</div>

États hover et focus :

<div class="bg-white rounded-lg shadow hover:shadow-xl hover:scale-105
             transition duration-300 ease-in-out cursor-pointer p-6">
    <h3 class="text-xl font-bold">Card cliquable</h3>
    <p class="text-gray-600">Hover pour voir l'effet</p>
</div>

États disponibles :

hover: : survol souris
focus: : focus au clavier
active: : en train de cliquer
disabled: : désactivé
group-hover: : survol du parent

Transitions :

transition                   <!-- All properties -->
transition-all              <!-- Explicite -->
transition-colors           <!-- Couleurs seulement -->
transition-transform        <!-- Transform seulement -->
duration-300                <!-- 300ms duration -->
ease-in-out                 <!-- Easing function -->

À retenir : Combinez hover + transform + transition pour des interactions fluides.

Cartes avancées (grids et layouts)

Card avec footer réactif :

<div class="bg-white rounded-lg shadow overflow-hidden flex flex-col">
    <!-- Image -->
    <img src="image.jpg" alt="" class="w-full h-48 object-cover">

    <!-- Contenu qui s'étire -->
    <div class="p-6 flex-grow">
        <h3 class="font-bold text-lg mb-2">Titre</h3>
        <p class="text-gray-600">Description longue ou courte...</p>
    </div>

    <!-- Footer en bas -->
    <div class="px-6 py-4 bg-gray-50 border-t flex gap-2">
        <button class="flex-1 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
            Action 1
        </button>
        <button class="flex-1 px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
            Action 2
        </button>
    </div>
</div>

Masonry grid (Pinterest-like) :

<div class="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
    <div class="bg-white rounded-lg shadow p-6 break-inside-avoid">
        Card 1 (hauteur variable)
    </div>
    <div class="bg-white rounded-lg shadow p-6 break-inside-avoid">
        Card 2 (hauteur variable)
    </div>
    <div class="bg-white rounded-lg shadow p-6 break-inside-avoid">
        Card 3 (hauteur variable)
    </div>
</div>

Card avec overlay au hover :

<div class="relative overflow-hidden rounded-lg group">
    <img src="image.jpg" alt="" class="w-full h-48 object-cover">

    <!-- Overlay -->
    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50
                  transition duration-300 flex items-center justify-center">
        <button class="opacity-0 group-hover:opacity-100 transition px-4 py-2 bg-white text-black rounded">
            Voir plus
        </button>
    </div>
</div>

Customisation et variants

Créer des variantes de card :

<!-- Card primaire -->
<div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-6">
    <h3 class="text-blue-900 font-bold">Info</h3>
    <p class="text-blue-800">Message informatif</p>
</div>

<!-- Card success -->
<div class="bg-green-50 border-l-4 border-green-500 rounded-lg p-6">
    <h3 class="text-green-900 font-bold">Succès</h3>
</div>

<!-- Card danger -->
<div class="bg-red-50 border-l-4 border-red-500 rounded-lg p-6">
    <h3 class="text-red-900 font-bold">Erreur</h3>
</div>

<!-- Card warning -->
<div class="bg-yellow-50 border-l-4 border-yellow-500 rounded-lg p-6">
    <h3 class="text-yellow-900 font-bold">Attention</h3>
</div>

Dark mode cards :

<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
    <h3 class="text-black dark:text-white font-bold text-xl">Titre</h3>
    <p class="text-gray-600 dark:text-gray-300">Description</p>
</div>

Tailler avec config Tailwind :

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      },
      colors: {
        brand-blue: '#1e40af',
        brand-gray: '#6b7280',
      }
    }
  }
}

// Usage
class="bg-brand-blue p-128 h-128"

Patterns réutilisables et composants

Composant card réutilisable (React) :

export function Card({ title, description, image, footer, children, className = '' }) {
  return (
    <div className={`bg-white rounded-lg shadow p-6 ${className}`}>
      {image && (
        <img src={image} alt="" className="w-full h-48 object-cover -m-6 mb-4 rounded-t-lg" />
      )}
      {title && <h3 className="text-xl font-bold mb-2">{title}</h3>}
      {description && <p className="text-gray-600 mb-4">{description}</p>}
      {children}
      {footer && (
        <div className="mt-4 pt-4 border-t flex gap-2">
          {footer}
        </div>
      )}
    </div>
  )
}

// Usage
<Card
  title="Mon Card"
  description="Description..."
  image="image.jpg"
  footer={<button>Action</button>}
/>

Headless UI + Tailwind (composants complexes) :

npm install @headlessui/react

import { Menu } from '@headlessui/react'

export function CardWithMenu() {
  return (
    <div class="bg-white rounded-lg shadow p-6">
      <div class="flex justify-between items-center">
        <h3 class="font-bold">Title</h3>
        <Menu>
          <Menu.Button>⋯</Menu.Button>
          <Menu.Items>
            <Menu.Item>{({ active }) => ...}</Menu.Item>
          </Menu.Items>
        </Menu>
      </div>
    </div>
  )
}

Checklist de bonnes pratiques :

✅ Utilisez des grids responsives pour les listes de cards
✅ Testez sur mobile, tablet, desktop
✅ Ajoutez des transitions smooth pour les interactions
✅ Prévoyez du dark mode avec dark: prefix
✅ Créez des composants réutilisables
✅ Optimisez les images avec object-cover
❌ N'oubliez pas les states focus pour accessibilité
❌ N'abusez pas des shadows (performance)

Conclusion : Tailwind CSS et les cards = combo puissante pour des UIs modernes, responsives et performantes. Pas de CSS custom = maintenance facialisée.