Les Fondamentaux

<!-- Padding (intérieur) -->
<div class="p-4">    <!-- padding: 16px (1rem) sur les 4 côtés -->
<div class="px-6">   <!-- padding horizontal : 24px -->
<div class="py-2">   <!-- padding vertical : 8px -->
<div class="pt-8">   <!-- padding-top : 32px -->
<div class="pr-3">   <!-- padding-right : 12px -->

<!-- Margin (extérieur) -->
<div class="m-4">    <!-- margin: 16px -->
<div class="mx-auto"> <!-- margin horizontal : auto (centrage) -->
<div class="mt-8">   <!-- margin-top : 32px -->
<div class="mb-2">   <!-- margin-bottom : 8px -->
<div class="-mt-4">  <!-- margin-top négatif : -16px -->

<!-- Texte -->
<p class="text-slate-900">Texte très foncé</p>
<p class="text-gray-500">Texte gris moyen</p>
<p class="text-blue-600">Texte bleu</p>
<p class="text-red-500">Texte rouge</p>

<!-- Fond -->
<div class="bg-white">Blanc</div>
<div class="bg-slate-100">Gris très clair</div>
<div class="bg-blue-500">Bleu vif</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">Dégradé</div>

<!-- Bordure -->
<div class="border border-gray-200">Bordure grise claire</div>
<div class="border-2 border-blue-500">Bordure bleue épaisse</div>

<!-- Opacité de couleur -->
<div class="bg-blue-500/50">Fond bleu à 50% d'opacité</div>
<p class="text-slate-900/75">Texte à 75% d'opacité</p>

<!-- Taille de texte -->
<p class="text-xs">Très petit (12px)</p>
<p class="text-sm">Petit (14px)</p>
<p class="text-base">Normal (16px)</p>
<p class="text-lg">Grand (18px)</p>
<p class="text-xl">Très grand (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>

<!-- Graisse -->
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semi-bold (600)</p>
<p class="font-bold">Bold (700)</p>

<!-- Alignement et style -->
<p class="text-center">Centré</p>
<p class="text-right">À droite</p>
<p class="italic">Italique</p>
<p class="uppercase tracking-wide">MAJUSCULES ESPACÉES</p>
<p class="leading-relaxed">Interlignage aéré (1.625)</p>
<p class="line-clamp-2">Tronqué après 2 lignes...</p>

<!-- Largeur -->
<div class="w-full">     <!-- 100% -->
<div class="w-1/2">     <!-- 50% -->
<div class="w-1/3">     <!-- 33.33% -->
<div class="w-64">      <!-- 256px (16rem) -->
<div class="w-screen">  <!-- 100vw -->
<div class="max-w-md">  <!-- max-width: 28rem (448px) -->
<div class="max-w-4xl"> <!-- max-width: 56rem (896px) -->
<div class="min-w-0">   <!-- min-width: 0 -->

<!-- Hauteur -->
<div class="h-screen">  <!-- 100vh -->
<div class="h-64">      <!-- 256px -->
<div class="h-full">    <!-- 100% -->
<div class="min-h-screen"> <!-- min-height: 100vh -->

<!-- Taille carrée -->
<div class="size-10">   <!-- width: 40px; height: 40px -->

<!-- Bordures -->
<div class="border">          <!-- border: 1px solid -->
<div class="border-2">        <!-- border: 2px solid -->
<div class="border-t">        <!-- border-top seulement -->
<div class="border-gray-200"> <!-- couleur de bordure -->
<div class="divide-y">        <!-- Bordures entre enfants (vertical) -->

<!-- Arrondis -->
<div class="rounded">         <!-- border-radius: 4px -->
<div class="rounded-md">      <!-- 6px -->
<div class="rounded-lg">      <!-- 8px -->
<div class="rounded-xl">      <!-- 12px -->
<div class="rounded-2xl">     <!-- 16px -->
<div class="rounded-full">    <!-- Cercle parfait -->
<div class="rounded-t-lg">    <!-- Arrondi en haut seulement -->

<!-- Ombres -->
<div class="shadow">          <!-- Ombre légère -->
<div class="shadow-md">       <!-- Ombre moyenne -->
<div class="shadow-lg">       <!-- Ombre prononcée -->
<div class="shadow-xl">       <!-- Ombre très prononcée -->
<div class="shadow-none">     <!-- Pas d'ombre -->

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
  <img
    src="/avatar.jpg"
    alt="Photo de profil"
    class="w-full h-48 object-cover"
  />
  <div class="p-6">
    <h2 class="text-xl font-bold text-slate-900 mb-1">
      Alice Dupont
    </h2>
    <p class="text-sm text-sky-600 font-medium mb-3">
      Développeuse Frontend
    </p>
    <p class="text-slate-600 text-sm leading-relaxed mb-4">
      Passionnée par React, TypeScript et le design system.
      Toujours en train d'apprendre quelque chose de nouveau.
    </p>
    <div class="flex gap-2">
      <button class="bg-sky-500 text-white px-4 py-2 rounded-lg
                     text-sm font-medium">
        Suivre
      </button>
      <button class="border border-slate-300 text-slate-700 px-4 py-2
                     rounded-lg text-sm font-medium">
        Message
      </button>
    </div>
  </div>
</div>