Exercices Tailwind CSS

Tâche : En Tailwind, créez un bouton (bg-blue, text-white, padding, rounded), un badge (bg-green/text-green, pill) et une carte (bg-white, border, shadow, rounded-xl).

Tâche : Bouton avec hover: (couleur + translateY), active:scale, et transition-all. Lien avec underline animé via after: pseudo-element Tailwind.

Tâche : Navbar avec flex items-center justify-between. Menu caché sur mobile (hidden md:flex). Boutons CTA à droite.

Tâche : Grid de cartes : 1 col mobile → 2 cols sm → 3 cols lg → 4 cols xl. Hover shadow sur les cartes.

Tâche : Page avec dark mode via classe. bg-white dark:bg-gray-900, textes et bordures avec préfixe dark:. Bouton toggle.

Tâche : Layout sidebar + main avec flex-col sur mobile → flex-row sur md. Sidebar cachée sur mobile, padding responsive.

Tâche : Carte image avec groupe : au hover → image scale, overlay noir, texte slide up (translate-y-full → group-hover:translate-y-0).

Tâche : Bouton accessible avec focus:ring-2 focus:ring-offset-2, disabled:opacity-50 disabled:cursor-not-allowed. Input avec focus:ring.

Tâche : Article avec space-y-6, leading-relaxed, divide-y sur une liste. Titre avec tracking-tight, texte avec text-gray-700.

Tâche finale : Page produit avec navbar sticky, grid 2 colonnes (image + infos), dark mode, hover sur image, prix mis en valeur, boutons CTA.