Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Formulaires | Construction de Composants de Base
Tailwind CSS pour le Développement Web

bookDé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).
index.html

index.html

copy
  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.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 3.57

bookDéfi : Formulaires

Glissez pour afficher le menu

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).
index.html

index.html

copy
  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.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6
some-alt