Solutions des Exercices - Tailwind CSS

1

Module 1 : Bouton "S'inscrire"

Créez un bouton "S'inscrire" avec les caractéristiques demandées.

✅ Résultat :

📝 Code :

<button class="px-6 py-3 bg-purple-600
text-white rounded-lg hover:bg-purple-700
transition-colors shadow-lg hover:shadow-xl
font-semibold">
  S'inscrire
</button>

🔍 Explication :

• bg-purple-600 = fond violet
• px-6 py-3 = padding horizontal 6 (24px), vertical 3 (12px)
• rounded-lg = coins arrondis (8px)
• hover:bg-purple-700 = assombrit au survol
• shadow-lg hover:shadow-xl = ombre qui s'intensifie

2

Module 2 : Carte de prix "Pro"

Recréez une carte de prix complète avec Tailwind.

✅ Résultat :

Pro

29€/mois

✓ Feature 1
✓ Feature 2
✓ Feature 3

📝 Code :

<div class="p-6 bg-white dark:bg-slate-800
rounded-2xl shadow-xl border border-slate-200
dark:border-slate-700 text-center max-w-[200px]">
  <h3 class="text-lg font-bold text-purple-600">Pro</h3>
  <div class="text-4xl font-bold mb-4">
    29€<span class="text-sm text-slate-500">/mois</span>
  </div>
  <ul class="text-sm space-y-2 mb-6">
    <li class="flex items-center gap-2">
      <span class="text-green-500">✓</span> Feature
    </li>
  </ul>
  <button class="w-full py-2 bg-purple-600 text-white
  rounded-lg hover:bg-purple-700 font-semibold">
    Choisir
  </button>
</div>

3

Module 3 : Galerie Photo Responsive

Créez une grille de galerie photo qui s'adapte à toutes les tailles d'écran.

📝 Code :

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 
xl:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
  <img src="photo1.jpg" class="w-full h-[200px] md:h-[250px] 
  lg:h-[300px] object-cover rounded-lg md:rounded-xl 
  lg:rounded-2xl">
  <!-- Répéter pour chaque photo -->
</div>

🔍 Points clés :

• grid-cols-1 → mobile : 1 colonne
• md:grid-cols-2 → tablette : 2 colonnes
• lg:grid-cols-3 → desktop : 3 colonnes
• xl:grid-cols-4 → grand écran : 4 colonnes
• h-[200px] md:h-[250px] lg:h-[300px] → hauteur qui augmente
• rounded-lg md:rounded-xl lg:rounded-2xl → coins plus arrondis

4

Module 4 : Navbar avec Dark Mode

Créez une navbar responsive avec toggle dark mode.

📝 Code structure :

<nav class="bg-white dark:bg-slate-900 
text-slate-900 dark:text-white p-4">
  <div class="flex items-center justify-between">
    <div class="font-bold">Logo</div>
    <div class="hidden md:flex gap-4">
      <a href="#">Accueil</a>
      <a href="#">Cours</a>
      <a href="#">Contact</a>
    </div>
    <button onclick="toggleDark()">
      🌞 / 🌙
    </button>
    <button class="md:hidden">☰</button>
  </div>
</nav>

🔍 JavaScript pour localStorage :

function toggleDark() {
  document.documentElement.classList.toggle('dark');
  const isDark = document.documentElement.classList.contains('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

// Au chargement
if (localStorage.getItem('theme') === 'dark') {
  document.documentElement.classList.add('dark');
}

5

Module 5 : Dashboard Complet

Dashboard responsive avec sidebar, composants réutilisables et dark mode.

📝 Exemple avec @apply :

/* style.css - Composants réutilisables */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    @apply p-6 bg-white dark:bg-slate-800 rounded-2xl
           shadow-lg border border-slate-200 
           dark:border-slate-700;
  }
  
  .btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white 
           rounded-lg hover:bg-indigo-700 
           transition-colors font-semibold;
  }
}

/* Utilisation dans HTML */
<div class="card">
  <h3>Titre</h3>
  <button class="btn-primary">Action</button>
</div>

🔍 Structure du Dashboard :

• Sidebar : hidden lg:flex w-64
• KPI Cards : Grid avec @apply
• Tableau : overflow-x-auto sur mobile
• Dark mode toggle avec localStorage
• Graphique SVG stylisé avec Tailwind