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.

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.