3 approches responsive en action
Testez vos classes Tailwind en temps réel ! Modifiez le code et voyez le résultat instantanément.
💡 Astuce : Essayez d'ajouter des classes comme animate-bounce, rotate-12 ou scale-110
Créez un bouton avec dégradé, ombre et effet au survol
Recréez une carte avec effet glassmorphism
Créez un badge avec animation pulse
Corrigés détaillés de tous les exercices
Retrouvez les réponses complètes avec explications pour chaque module du cours.
Accéder aux solutions →Testez vos connaissances
5 quiz interactifs (3 questions chacun) pour valider votre compréhension de chaque module.
Faire les quiz →Testez vos connaissances avec 5 questions !
Votre score :
Retrouvez les réponses aux exercices de chaque module
Code :
Structure :
Code de la grille :
Démonstration (redimensionnez la fenêtre) :
📱 1 col | 📱💻 2 cols | 🖥️ 3 cols | 🖥️+ 4 cols
Structure avec sidebar responsive :
Ventes
12,450€
Utilisateurs
1,234
Conversion
3.2%
| ID | Client | Montant |
|---|---|---|
| #001 | Marie D. | 125€ |
| #002 | Jean P. | 89€ |
10 composants prêts à l'emploi, copiez et adaptez !
<section class="relative min-h-[500px] flex items-center justify-center bg-gradient-to-br from-indigo-600 to-purple-700">
<div class="text-center px-4">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-4">
Votre Titre
</h1>
<p class="text-xl text-white/80 mb-8">
Votre sous-titre accrocheur
</p>
<button class="px-8 py-3 bg-white text-indigo-600 rounded-lg font-semibold hover:bg-white/90 transition-colors">
Commencer
</button>
</div>
</section>
Votre sous-titre accrocheur
<div class="grid md:grid-cols-3 gap-6">
<div class="p-6 bg-slate-800 rounded-2xl border border-slate-700">
<div class="w-12 h-12 bg-indigo-500/20 rounded-xl flex items-center justify-center mb-4">
🚀
</div>
<h3 class="text-lg font-semibold text-white mb-2">Rapide</h3>
<p class="text-slate-400 text-sm">Description de la feature</p>
</div>
<!-- Répéter 2x -->
</div>
Description
Description
Description
<div class="p-6 bg-white dark:bg-slate-800 rounded-2xl shadow-lg">
<div class="flex gap-1 mb-4">
<span class="text-yellow-400">★★★★★</span>
</div>
<p class="text-slate-600 dark:text-slate-300 mb-4 italic">
"Un excellent service qui a dépassé mes attentes."
</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500"></div>
<div>
<p class="font-semibold text-slate-900 dark:text-white">Marie D.</p>
<p class="text-xs text-slate-500">CEO, Startup</p>
</div>
</div>
</div>
"Un excellent service qui a dépassé mes attentes."
Marie D.
CEO, Startup
<div class="grid md:grid-cols-3 gap-6">
<!-- Plan Starter -->
<div class="p-6 border border-slate-700 rounded-2xl">
<h3 class="text-lg font-semibold text-white">Starter</h3>
<div class="text-3xl font-bold text-white my-4">
0€<span class="text-sm text-slate-400">/mois</span>
</div>
<ul class="space-y-2 text-slate-400 text-sm mb-6">
<li>✓ 1 projet</li>
<li>✓ Support basique</li>
</ul>
<button class="w-full py-2 border border-indigo-500 text-indigo-400 rounded-lg">
Choisir
</button>
</div>
</div>
<form class="flex gap-2 max-w-md">
<input
type="email"
placeholder="votre@email.com"
class="flex-1 px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
>
<button class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors">
S'inscrire
</button>
</form>
<!-- Variantes de badges -->
<span class="px-2 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">
Actif
</span>
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 rounded-full text-xs">
Nouveau
</span>
<span class="px-2 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">
Pro
</span>
<span class="px-2 py-1 bg-amber-500/20 text-amber-400 rounded-full text-xs">
Warning
</span>
<!-- Overlay -->
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<!-- Modal -->
<div class="bg-slate-800 rounded-2xl p-6 max-w-md w-full border border-slate-700">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-white">Titre Modal</h3>
<button class="text-slate-400 hover:text-white">✕</button>
</div>
<p class="text-slate-300 mb-6">Contenu de votre modal...</p>
<div class="flex gap-3 justify-end">
<button class="px-4 py-2 text-slate-300 hover:text-white">
Annuler
</button>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">
Confirmer
</button>
</div>
</div>
</div>
Contenu de votre modal ici...
<nav class="flex items-center gap-2 text-sm">
<a href="/" class="text-slate-400 hover:text-white">Accueil</a>
<span class="text-slate-600">/</span>
<a href="/cours" class="text-slate-400 hover:text-white">Cours</a>
<span class="text-slate-600">/</span>
<span class="text-white">Module 1</span>
</nav>
<div class="flex -space-x-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 border-2 border-slate-900"></div>
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 border-2 border-slate-900"></div>
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 border-2 border-slate-900"></div>
<div class="w-10 h-10 rounded-full bg-slate-700 border-2 border-slate-900 flex items-center justify-center text-xs text-white">
+5
</div>
</div>
<!-- Card skeleton -->
<div class="p-6 bg-slate-800 rounded-2xl animate-pulse">
<div class="h-4 bg-slate-700 rounded w-1/3 mb-4"></div>
<div class="h-3 bg-slate-700 rounded w-full mb-2"></div>
<div class="h-3 bg-slate-700 rounded w-4/5 mb-4"></div>
<div class="flex gap-2">
<div class="h-8 bg-slate-700 rounded w-20"></div>
<div class="h-8 bg-slate-700 rounded w-20"></div>
</div>
</div>