## Tâche
À l'aide de Tailwind CSS, créer un composant carte répondant aux exigences suivantes :
1. La carte doit comporter :
   - Une largeur maximale de `md` ;
   - Des coins arrondis ;
   - Une couleur d'arrière-plan.
2. La carte doit contenir :
   - Une image occupant toute la largeur de la carte ;
   - Un titre en texte gras avec une grande taille de police ;
   - Un paragraphe avec une taille de police standard et un style italique.
3. Ajouter des badges à la carte avec :
   - Des coins arrondis et une petite taille de police.


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBDYXJkcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0ibWF4LXctX19fX18gX19fX18gb3ZlcmZsb3ctaGlkZGVuIHNoYWRvdy1sZyBfX19fXy1wdXJwbGUtMTAwIj4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJfX19fXy1fX19fXyIKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNjE1NTY3ZGEtYjA1My00Njc0LWI4OWMtMDUzMDU3ZDJiY2E3L3NlY3Rpb24tMy9mYW4ucG5nIgogICAgICAgIGFsdD0iU2FtcGxlIEltYWdlIgogICAgICAvPgogICAgICA8ZGl2IGNsYXNzPSJweC02IHB5LTQiPgogICAgICAgIDxoMiBjbGFzcz0iZm9udC1fX19fXyB0ZXh0LV9fX19fIHRleHQtcHVycGxlLTkwMCBtYi0yIj5DYXJkIFRpdGxlPC9oMj4KICAgICAgICA8cCBjbGFzcz0idGV4dC1wdXJwbGUtNzAwIHRleHQtX19fX18gX19fX18iPgogICAgICAgICAgVGhpcyBpcyBhIHNpbXBsZSBjYXJkIGNvbXBvbmVudCBjcmVhdGVkIHVzaW5nIFRhaWx3aW5kIENTUy4gSXQKICAgICAgICAgIGluY2x1ZGVzIGFuIGltYWdlLCBhIHRpdGxlLCBzb21lIHRleHQsIGFuZCBhY3Rpb25zLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy15ZWxsb3ctMjAwIF9fX19fLWZ1bGwgcHgtMyBweS0xIHRleHQtX19fX18gZm9udC1zZW1pYm9sZCB0ZXh0LXllbGxvdy03MDAgbXItMiBtYi0yIgogICAgICAgICAgPiN0YWcxPC9zcGFuCiAgICAgICAgPgogICAgICAgIDxzcGFuCiAgICAgICAgICBjbGFzcz0iaW5saW5lLWJsb2NrIGJnLXBpbmstMjAwIF9fX19fLWZ1bGwgcHgtMyBweS0xIHRleHQtX19fX18gZm9udC1zZW1pYm9sZCB0ZXh0LXBpbmstNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMjwvc3BhbgogICAgICAgID4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy1ncmVlbi0yMDAgX19fX18tZnVsbCBweC0zIHB5LTEgdGV4dC1fX19fXyBmb250LXNlbWlib2xkIHRleHQtZ3JlZW4tNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMzwvc3BhbgogICAgICAgID4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDEKICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNzAwIHRleHQtd2hpdGUgZm9udC1ib2xkIHB5LTIgcHgtNCByb3VuZGVkIG1sLTIiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDIKICAgICAgICA8L2J1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

- Utiliser `max-w-md` pour définir la largeur maximale de la carte ;
- Utiliser `rounded` pour ajouter des coins arrondis à la carte ;
- Utiliser `bg-purple-100` pour définir la couleur d'arrière-plan de la carte ;
- Utiliser `w-full` pour que l'image occupe toute la largeur de la carte ;
- Utiliser `font-bold` pour appliquer un style gras au texte ;
- Utiliser `text-xl` pour définir une taille de police plus grande pour le titre ;
- Utiliser `text-base` pour définir la taille de police standard du texte du paragraphe ;
- Utiliser `italic` pour appliquer un style italique au texte ;
- Utiliser `rounded-full` pour ajouter des coins arrondis aux badges ;
- Utiliser `text-sm` pour définir une petite taille de police pour les badges.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBDYXJkcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im1heC13LW1kIHJvdW5kZWQgb3ZlcmZsb3ctaGlkZGVuIHNoYWRvdy1sZyBiZy1wdXJwbGUtMTAwIj4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJ3LWZ1bGwiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzYxNTU2N2RhLWIwNTMtNDY3NC1iODljLTA1MzA1N2QyYmNhNy9zZWN0aW9uLTMvZmFuLnBuZyIKICAgICAgICBhbHQ9IlNhbXBsZSBJbWFnZSIKICAgICAgLz4KICAgICAgPGRpdiBjbGFzcz0icHgtNiBweS00Ij4KICAgICAgICA8aDIgY2xhc3M9ImZvbnQtYm9sZCB0ZXh0LXhsIHRleHQtcHVycGxlLTkwMCBtYi0yIj5DYXJkIFRpdGxlPC9oMj4KICAgICAgICA8cCBjbGFzcz0idGV4dC1wdXJwbGUtNzAwIHRleHQtYmFzZSBpdGFsaWMiPgogICAgICAgICAgVGhpcyBpcyBhIHNpbXBsZSBjYXJkIGNvbXBvbmVudCBjcmVhdGVkIHVzaW5nIFRhaWx3aW5kIENTUy4gSXQKICAgICAgICAgIGluY2x1ZGVzIGFuIGltYWdlLCBhIHRpdGxlLCBzb21lIHRleHQsIGFuZCBhY3Rpb25zLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy15ZWxsb3ctMjAwIHJvdW5kZWQtZnVsbCBweC0zIHB5LTEgdGV4dC1zbSBmb250LXNlbWlib2xkIHRleHQteWVsbG93LTcwMCBtci0yIG1iLTIiCiAgICAgICAgICA+I3RhZzE8L3NwYW4KICAgICAgICA+CiAgICAgICAgPHNwYW4KICAgICAgICAgIGNsYXNzPSJpbmxpbmUtYmxvY2sgYmctcGluay0yMDAgcm91bmRlZC1mdWxsIHB4LTMgcHktMSB0ZXh0LXNtIGZvbnQtc2VtaWJvbGQgdGV4dC1waW5rLTcwMCBtci0yIG1iLTIiCiAgICAgICAgICA+I3RhZzI8L3NwYW4KICAgICAgICA+CiAgICAgICAgPHNwYW4KICAgICAgICAgIGNsYXNzPSJpbmxpbmUtYmxvY2sgYmctZ3JlZW4tMjAwIHJvdW5kZWQtZnVsbCBweC0zIHB5LTEgdGV4dC1zbSBmb250LXNlbWlib2xkIHRleHQtZ3JlZW4tNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMzwvc3BhbgogICAgICAgID4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDEKICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNzAwIHRleHQtd2hpdGUgZm9udC1ib2xkIHB5LTIgcHgtNCByb3VuZGVkIG1sLTIiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDIKICAgICAgICA8L2J1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Apprenez à styliser des sites web efficacement avec Tailwind CSS, un framework utilitaire pour un développement d’interface rapide. Découvrez comment configurer Tailwind et appliquer des classes utilitaires pour les couleurs, la typographie, les bordures et les ombres. Concevez et stylisez des composants essentiels tels que boutons, cartes et formulaires. Maîtrisez les techniques de mise en page à l’aide des utilitaires d’espacement, de flexbox et de grille. Créez des designs responsives et personnalisez Tailwind selon les besoins de votre projet.

Découvrez Tailwind CSS, un framework utilitaire reconnu pour sa flexibilité et son efficacité dans la conception web. Présentation des principaux avantages et de la philosophie utilitaire. Exploration des méthodes d'installation simples via CDN ou npm/yarn.

Découvrez les éléments fondamentaux de Tailwind CSS, y compris la compréhension des classes utilitaires et leur application aux éléments HTML. Approfondissez les techniques de stylisation essentielles telles que la définition des couleurs, des bordures, des ombres et des utilitaires de typographie.

Plongez dans des applications pratiques axées sur la création et la mise en forme de boutons, de formulaires et de cartes. À travers des exercices pratiques, vous maîtriserez la construction de ces composants UI essentiels, en développant vos compétences grâce à des exemples concrets.

Découvrez les principales utilités d'espacement de Tailwind CSS, en abordant l'application des marges et des espacements internes à vos éléments. Vous apprendrez également à utiliser les utilitaires flexbox pour contrôler la mise en page à l'aide des paramètres d'affichage, de la direction du flex et de l'alignement horizontal et vertical. De plus, vous explorerez les utilitaires de grille pour créer des mises en page en grille simples mais puissantes, en maîtrisant la configuration des conteneurs et des éléments de grille.

Découvrez comment personnaliser Tailwind CSS pour répondre aux exigences de conception de votre projet et créer des mises en page adaptables pour divers appareils.

Défi : Créer un Composant Carte

Tâche

Awesome!

Défi : Créer un Composant Carte

Tâche