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

bookDé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 :

  1. Le conteneur extérieur doit avoir :
    • Une couleur de fond blanche ;
    • Une ombre moyenne.
  2. 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.
  3. À 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.
  4. 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

index.html

copy
  1. Couleurs de fond : Utilisez bg-white, bg-blue-50, bg-green-100 pour les couleurs de fond ;
  2. Couleurs du texte : Utilisez text-gray-900, text-gray-700, text-blue-700, text-green-700 pour les couleurs du texte ;
  3. Couleurs des bordures : Utilisez border-blue-500, border-green-500 pour les couleurs des bordures ;
  4. Rayon des bordures : Utilisez rounded-md, rounded pour les coins arrondis ;
  5. Ombres : Utilisez shadow-md, shadow-sm pour les ombres ;
  6. Taille du texte : Utilisez text-2xl pour la taille des titres.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. 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 : 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 :

  1. Le conteneur extérieur doit avoir :
    • Une couleur de fond blanche ;
    • Une ombre moyenne.
  2. 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.
  3. À 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.
  4. 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

index.html

copy
  1. Couleurs de fond : Utilisez bg-white, bg-blue-50, bg-green-100 pour les couleurs de fond ;
  2. Couleurs du texte : Utilisez text-gray-900, text-gray-700, text-blue-700, text-green-700 pour les couleurs du texte ;
  3. Couleurs des bordures : Utilisez border-blue-500, border-green-500 pour les couleurs des bordures ;
  4. Rayon des bordures : Utilisez rounded-md, rounded pour les coins arrondis ;
  5. Ombres : Utilisez shadow-md, shadow-sm pour les ombres ;
  6. Taille du texte : Utilisez text-2xl pour la taille des titres.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 6
some-alt