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

book
Défi : Cartes

Tâche

En utilisant Tailwind CSS, créez un composant de carte avec les exigences suivantes :

  1. La carte doit avoir :

    • Une largeur maximale de md ;

    • Des coins arrondis ;

    • Une couleur de fond.

  2. La carte doit contenir :

    • Une image qui occupe toute la largeur de la carte ;

    • Un titre avec un texte en gras et une grande taille de police ;

    • Un paragraphe avec une taille de police de base et un style italique.

  3. Ajoutez des badges à la carte avec :

    • Des coins arrondis et une petite taille de police.

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: Cards - Task</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="max-w-_____ _____ overflow-hidden shadow-lg _____-purple-100">
<img
class="_____-_____"
src="https://via.placeholder.com/400x200"
alt="Sample Image"
/>
<div class="px-6 py-4">
<h2 class="font-_____ text-_____ text-purple-900 mb-2">Card Title</h2>
<p class="text-purple-700 text-_____ _____">
This is a simple card component created using Tailwind CSS. It
includes an image, a title, some text, and actions.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span
class="inline-block bg-yellow-200 _____-full px-3 py-1 text-_____ font-semibold text-yellow-700 mr-2 mb-2"
>#tag1</span
>
<span
class="inline-block bg-pink-200 _____-full px-3 py-1 text-_____ font-semibold text-pink-700 mr-2 mb-2"
>#tag2</span
>
<span
class="inline-block bg-green-200 _____-full px-3 py-1 text-_____ font-semibold text-green-700 mr-2 mb-2"
>#tag3</span
>
</div>
<div class="px-6 pt-4 pb-2">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Action 1
</button>
<button
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded ml-2"
>
Action 2
</button>
</div>
</div>
</body>
</html>

  • Utilisez max-w-md pour définir la largeur maximale de la carte ;

  • Utilisez rounded pour ajouter des coins arrondis à la carte ;

  • Utilisez bg-purple-100 pour définir la couleur de fond de la carte ;

  • Utilisez w-full pour que l'image occupe toute la largeur de la carte ;

  • Utilisez font-bold pour appliquer un style gras au texte ;

  • Utilisez text-xl pour définir une taille de police plus grande pour le titre ;

  • Utilisez text-base pour définir la taille de police de base pour le texte du paragraphe ;

  • Utilisez italic pour appliquer un style italique au texte ;

  • Utilisez rounded-full pour ajouter des coins arrondis aux badges ;

  • Utilisez text-sm pour définir la petite taille de police pour les badges.

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: Cards - Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="max-w-md rounded overflow-hidden shadow-lg bg-purple-100">
<img
class="w-full"
src="https://via.placeholder.com/400x200"
alt="Sample Image"
/>
<div class="px-6 py-4">
<h2 class="font-bold text-xl text-purple-900 mb-2">Card Title</h2>
<p class="text-purple-700 text-base italic">
This is a simple card component created using Tailwind CSS. It
includes an image, a title, some text, and actions.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span
class="inline-block bg-yellow-200 rounded-full px-3 py-1 text-sm font-semibold text-yellow-700 mr-2 mb-2"
>#tag1</span
>
<span
class="inline-block bg-pink-200 rounded-full px-3 py-1 text-sm font-semibold text-pink-700 mr-2 mb-2"
>#tag2</span
>
<span
class="inline-block bg-green-200 rounded-full px-3 py-1 text-sm font-semibold text-green-700 mr-2 mb-2"
>#tag3</span
>
</div>

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 4

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

some-alt