Défi : Style de Base
Tâche
En utilisant les utilitaires Tailwind CSS pour les couleurs, les bordures et les ombres, créez un composant de carte stylisé avec les spécifications suivantes :
- Le conteneur extérieur doit avoir :
- Une couleur de fond blanche ;
- Une ombre moyenne.
- La carte doit contenir :
- Un titre (
h2
) avec une taille de texte de 2xl et une couleur de texte gris-900 ; - Un paragraphe (
p
) avec une couleur de texte gris-700.
- Un titre (
- À l'intérieur de la carte, créez une boîte bordée avec :
- Une couleur de fond bleu clair (par exemple, blue-50) ;
- Une couleur de bordure bleue ;
- Des coins moyennement arrondis ;
- Une couleur de texte bleu-700.
- Ajoutez une autre boîte avec :
- Une couleur de fond vert clair (par exemple, green-100) ;
- Une couleur de bordure verte ;
- Des coins arrondis ;
- Une petite ombre ;
- Une couleur de texte vert-700.
index.html
- Couleurs de fond : Utilisez
bg-white
,bg-blue-50
,bg-green-100
pour les couleurs de fond ; - Couleurs du texte : Utilisez
text-gray-900
,text-gray-700
,text-blue-700
,text-green-700
pour les couleurs du texte ; - Couleurs des bordures : Utilisez
border-blue-500
,border-green-500
pour les couleurs des bordures ; - Rayon des bordures : Utilisez
rounded-md
,rounded
pour les coins arrondis ; - Ombres : Utilisez
shadow-md
,shadow-sm
pour les ombres ; - Taille du texte : Utilisez
text-2xl
pour la taille des titres.
index.html
Tout était clair ?
Merci pour vos commentaires !
Section 2. Chapitre 6
Demandez à l'IA
Demandez à l'IA
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
Défi : Style de Base
Glissez pour afficher le menu
Tâche
En utilisant les utilitaires Tailwind CSS pour les couleurs, les bordures et les ombres, créez un composant de carte stylisé avec les spécifications suivantes :
- Le conteneur extérieur doit avoir :
- Une couleur de fond blanche ;
- Une ombre moyenne.
- La carte doit contenir :
- Un titre (
h2
) avec une taille de texte de 2xl et une couleur de texte gris-900 ; - Un paragraphe (
p
) avec une couleur de texte gris-700.
- Un titre (
- À l'intérieur de la carte, créez une boîte bordée avec :
- Une couleur de fond bleu clair (par exemple, blue-50) ;
- Une couleur de bordure bleue ;
- Des coins moyennement arrondis ;
- Une couleur de texte bleu-700.
- Ajoutez une autre boîte avec :
- Une couleur de fond vert clair (par exemple, green-100) ;
- Une couleur de bordure verte ;
- Des coins arrondis ;
- Une petite ombre ;
- Une couleur de texte vert-700.
index.html
- Couleurs de fond : Utilisez
bg-white
,bg-blue-50
,bg-green-100
pour les couleurs de fond ; - Couleurs du texte : Utilisez
text-gray-900
,text-gray-700
,text-blue-700
,text-green-700
pour les couleurs du texte ; - Couleurs des bordures : Utilisez
border-blue-500
,border-green-500
pour les couleurs des bordures ; - Rayon des bordures : Utilisez
rounded-md
,rounded
pour les coins arrondis ; - Ombres : Utilisez
shadow-md
,shadow-sm
pour les ombres ; - Taille du texte : Utilisez
text-2xl
pour la taille des titres.
index.html
Tout était clair ?
Merci pour vos commentaires !
Section 2. Chapitre 6