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

book
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 :

  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.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Basic Styling - Task</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-_____ p-4 shadow-_____">
<h2 class="text-_____ text-_____-_____">Styled Card</h2>
<p class="_____-_____-_____">
This card is styled using Tailwind CSS utilities.
</p>
<div class="border border-_____-500 rounded-_____ p-4 bg-_____-_____">
<p class="_____-_____-_____">
This is a bordered box with a background color.
</p>
</div>
<div
class="mt-4 p-4 bg-_____-_____ border border-_____-_____ _____ shadow-_____"
>
<p class="_____-_____-_____">Another box with different styling.</p>
</div>
</div>
</body>
</html>

  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.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Basic Styling - Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-white p-4 shadow-md">
<h2 class="text-2xl text-gray-900">Styled Card</h2>
<p class="text-gray-700">
This card is styled using Tailwind CSS utilities.
</p>
<div class="border border-blue-500 rounded-md p-4 bg-blue-50">
<p class="text-blue-700">
This is a bordered box with a background color.
</p>
</div>
<div
class="mt-4 p-4 bg-green-100 border border-green-500 rounded shadow-sm"
>
<p class="text-green-700">Another box with different styling.</p>
</div>
</div>
</body>
</html>

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

We use cookies to make your experience better!
some-alt