Défi : Formulaires

Tâche

Utilisez Tailwind CSS pour compléter le style d'un formulaire avec des champs de saisie, des zones de texte, des boutons radio et un interrupteur.

Remplissez les blancs avec les classes Tailwind CSS appropriées pour obtenir le style souhaité.

• Champs de saisie et zones de texte :
  • Bordure gris clair (border-gray-300);
  • Coins moyennement arrondis (rounded-md);
  • État de focus avec un anneau bleu (focus:ring-2 et focus:ring-blue-500).
• Bouton Soumettre :
  • Fond bleu primaire (bg-blue-500);
  • Bleu plus foncé au survol (hover:bg-blue-700);
  • Coins arrondis (rounded);
  • État de focus avec un anneau (focus:outline-none, focus:ring-2, et focus:ring-blue-500).

1. Couleur de la bordure : Utilisez border-gray-300 pour une bordure gris clair ;
2. Coins arrondis : Utilisez rounded-md pour des coins moyennement arrondis ;
3. Anneau de focus : Utilisez focus:ring-2 pour ajouter un anneau au focus et focus:ring-blue-500 pour une couleur bleue.
4. Survol du bouton de soumission : Utilisez hover:bg-blue-700 pour un bleu plus foncé au survol ;
5. Anneau du bouton de soumission : Utilisez focus:outline-none pour supprimer le contour de focus par défaut, focus:ring-2 pour ajouter un anneau au focus, et focus:ring-blue-500 pour définir la couleur de l'anneau.