Composants UI

<!-- Bouton primaire -->
<button class="bg-blue-600 text-white px-5 py-2.5 rounded-lg font-medium
               hover:bg-blue-700 active:bg-blue-800
               focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
               transition-colors">
  Primaire
</button>

<!-- Bouton secondaire (outline) -->
<button class="border-2 border-blue-600 text-blue-600 px-5 py-2.5 rounded-lg font-medium
               hover:bg-blue-50 active:bg-blue-100
               transition-colors">
  Secondaire
</button>

<!-- Bouton ghost (transparent) -->
<button class="text-slate-600 px-5 py-2.5 rounded-lg font-medium
               hover:bg-slate-100 active:bg-slate-200
               transition-colors">
  Ghost
</button>

<!-- Bouton avec icône -->
<button class="inline-flex items-center gap-2 bg-green-600 text-white
               px-5 py-2.5 rounded-lg font-medium hover:bg-green-700
               transition-colors">
  <i class="fa-solid fa-check"></i>
  Confirmer
</button>

<!-- Bouton icon-only -->
<button class="size-10 inline-flex items-center justify-center
               rounded-full bg-slate-100 hover:bg-slate-200
               text-slate-600 transition-colors">
  <i class="fa-solid fa-heart"></i>
</button>

<!-- Groupe de boutons -->
<div class="inline-flex rounded-lg overflow-hidden border border-slate-200">
  <button class="px-4 py-2 bg-white hover:bg-slate-50 border-r">Jour</button>
  <button class="px-4 py-2 bg-blue-50 text-blue-600 border-r font-medium">Semaine</button>
  <button class="px-4 py-2 bg-white hover:bg-slate-50">Mois</button>
</div>

<!-- Carte simple -->
<div class="bg-white rounded-xl border border-slate-200 shadow-sm
            overflow-hidden hover:shadow-md transition-shadow">
  <img src="cover.jpg" alt="" class="w-full h-48 object-cover" />
  <div class="p-5">
    <span class="text-xs font-medium text-blue-600 bg-blue-50
                 px-2 py-1 rounded-full">
      React
    </span>
    <h3 class="text-lg font-bold mt-3 mb-2">Titre de la carte</h3>
    <p class="text-slate-500 text-sm leading-relaxed line-clamp-2">
      Une description qui peut être assez longue mais sera
      tronquée après deux lignes grâce à line-clamp.
    </p>
    <div class="mt-4 flex items-center justify-between">
      <span class="text-sm text-slate-400">Il y a 3 jours</span>
      <a class="text-sm font-medium text-blue-600 hover:underline">
        Lire →
      </a>
    </div>
  </div>
</div>

<!-- Carte horizontale -->
<div class="flex bg-white rounded-xl border overflow-hidden">
  <img src="thumb.jpg" class="w-40 object-cover shrink-0" />
  <div class="p-4 flex flex-col justify-between">
    <div>
      <h3 class="font-bold">Titre</h3>
      <p class="text-sm text-slate-500 mt-1">Description courte</p>
    </div>
    <span class="text-xs text-slate-400">2 min de lecture</span>
  </div>
</div>

<!-- Input avec label -->
<div class="space-y-1.5">
  <label class="text-sm font-medium text-slate-700" for="email">
    Email
  </label>
  <input id="email" type="email"
    class="w-full px-4 py-2.5 rounded-lg border border-slate-300
           text-slate-900 placeholder:text-slate-400
           focus:outline-none focus:ring-2 focus:ring-blue-500
           focus:border-blue-500 transition-colors"
    placeholder="ton@email.com" />
  <p class="text-xs text-slate-500">On ne spammera jamais.</p>
</div>

<!-- Select -->
<select class="w-full px-4 py-2.5 rounded-lg border border-slate-300
               bg-white text-slate-900
               focus:outline-none focus:ring-2 focus:ring-blue-500">
  <option>Sélectionner un cours</option>
  <option>React</option>
  <option>Next.js</option>
  <option>TypeScript</option>
</select>

<!-- Textarea -->
<textarea rows="4"
  class="w-full px-4 py-2.5 rounded-lg border border-slate-300
         resize-none focus:outline-none focus:ring-2
         focus:ring-blue-500"
  placeholder="Ton message..."></textarea>

<!-- Checkbox custom -->
<label class="flex items-center gap-3 cursor-pointer">
  <input type="checkbox"
    class="size-5 rounded border-slate-300 text-blue-600
           focus:ring-blue-500" />
  <span class="text-sm text-slate-700">
    J'accepte les conditions
  </span>
</label>

<!-- Badges -->
<span class="text-xs font-medium px-2.5 py-1 rounded-full
             bg-green-100 text-green-700">
  Complété
</span>
<span class="text-xs font-medium px-2.5 py-1 rounded-full
             bg-yellow-100 text-yellow-700">
  En cours
</span>
<span class="text-xs font-medium px-2.5 py-1 rounded-full
             bg-red-100 text-red-700">
  Erreur
</span>

<!-- Alerte / Notification -->
<div class="flex items-start gap-3 p-4 rounded-lg bg-blue-50
            border border-blue-200">
  <i class="fa-solid fa-circle-info text-blue-500 mt-0.5"></i>
  <div>
    <h4 class="font-medium text-blue-800">Info</h4>
    <p class="text-sm text-blue-700 mt-1">
      Votre profil a été mis à jour avec succès.
    </p>
  </div>
  <button class="ml-auto text-blue-400 hover:text-blue-600">
    <i class="fa-solid fa-xmark"></i>
  </button>
</div>

<!-- Alerte warning -->
<div class="flex items-start gap-3 p-4 rounded-lg bg-amber-50
            border border-amber-200">
  <i class="fa-solid fa-triangle-exclamation text-amber-500 mt-0.5"></i>
  <div>
    <h4 class="font-medium text-amber-800">Attention</h4>
    <p class="text-sm text-amber-700 mt-1">
      Votre session expire dans 5 minutes.
    </p>
  </div>
</div>

<!-- Navbar responsive -->
<nav class="bg-white border-b border-slate-200">
  <div class="max-w-6xl mx-auto px-4 flex items-center justify-between h-16">
    <!-- Logo -->
    <a href="/" class="text-xl font-bold text-slate-900">
      <i class="fa-solid fa-code mr-2 text-blue-500"></i>MonApp
    </a>

    <!-- Liens desktop -->
    <div class="hidden md:flex items-center gap-1">
      <a class="px-3 py-2 rounded-lg text-sm font-medium
                text-blue-600 bg-blue-50">
        Accueil
      </a>
      <a class="px-3 py-2 rounded-lg text-sm font-medium
                text-slate-600 hover:bg-slate-100 transition-colors">
        Cours
      </a>
      <a class="px-3 py-2 rounded-lg text-sm font-medium
                text-slate-600 hover:bg-slate-100 transition-colors">
        Blog
      </a>
    </div>

    <!-- Actions -->
    <div class="flex items-center gap-3">
      <button class="bg-blue-600 text-white text-sm px-4 py-2
                     rounded-lg font-medium hover:bg-blue-700
                     transition-colors">
        S'inscrire
      </button>
    </div>
  </div>
</nav>

<!-- Breadcrumb -->
<nav class="flex items-center gap-2 text-sm text-slate-500">
  <a class="hover:text-slate-700">Accueil</a>
  <i class="fa-solid fa-chevron-right text-xs"></i>
  <a class="hover:text-slate-700">Cours</a>
  <i class="fa-solid fa-chevron-right text-xs"></i>
  <span class="text-slate-900 font-medium">Tailwind CSS</span>
</nav>