## Aufgabe
Mit Tailwind CSS eine Kartenkomponente erstellen, die folgende Anforderungen erfüllt:
1. Die Karte soll enthalten:
   - Eine maximale Breite von `md`;
   - Abgerundete Ecken;
   - Eine Hintergrundfarbe.
2. Die Karte soll beinhalten:
   - Ein Bild, das die gesamte Breite der Karte einnimmt;
   - Einen Titel mit fettem Text und großer Schriftgröße;
   - Einen Absatz mit Standardschriftgröße und kursivem Stil.
3. Badges zur Karte hinzufügen mit:
   - Abgerundeten Ecken und kleiner Schriftgröße.


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

- `max-w-md` verwenden, um die maximale Breite der Karte festzulegen;
- `rounded` verwenden, um abgerundete Ecken zur Karte hinzuzufügen;
- `bg-purple-100` verwenden, um die Hintergrundfarbe der Karte festzulegen;
- `w-full` verwenden, damit das Bild die gesamte Breite der Karte einnimmt;
- `font-bold` verwenden, um den Text fett darzustellen;
- `text-xl` verwenden, um eine größere Schriftgröße für den Titel festzulegen;
- `text-base` verwenden, um die Standardschriftgröße für den Absatztext festzulegen;
- `italic` verwenden, um den Text kursiv darzustellen;
- `rounded-full` verwenden, um abgerundete Ecken für die Badges hinzuzufügen;
- `text-sm` verwenden, um die kleine Schriftgröße für die Badges festzulegen.

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

Effizientes Gestalten von Websites mit Tailwind CSS, einem Utility-First-Framework für schnelle UI-Entwicklung. Einführung in die Einrichtung von Tailwind und die Anwendung von Utility-Klassen für Farben, Typografie, Rahmen und Schatten. Gestaltung und Design grundlegender Komponenten wie Buttons, Karten und Formulare. Beherrschung von Layout-Techniken mit Abstands-, Flexbox- und Grid-Utilities. Entwicklung responsiver Designs und Anpassung von Tailwind an projektspezifische Anforderungen.

Lernen Sie Tailwind CSS kennen, ein Utility-First-Framework, das für seine Flexibilität und Effizienz im Webdesign bekannt ist. Entdecken Sie die wichtigsten Vorteile und die Utility-First-Philosophie. Außerdem werden die einfachen Installationsmethoden über CDN oder npm/yarn vorgestellt.

Entdecken Sie die grundlegenden Elemente von Tailwind CSS, einschließlich des Verständnisses von Utility-Klassen und deren Anwendung auf HTML-Elemente. Vertiefen Sie sich in wesentliche Gestaltungstechniken wie das Festlegen von Farben, Rändern, Schatten und Typografie-Utilities.

Vertiefung in praktische Anwendungen mit Fokus auf die Erstellung und Gestaltung von Buttons, Formularen und Karten.
Durch praxisnahe Herausforderungen wird das Erstellen dieser grundlegenden UI-Komponenten anhand von Beispielen aus der realen Welt vermittelt und die Fähigkeiten werden erweitert.

Erkunden Sie die grundlegenden Abstands-Utilities von Tailwind CSS, einschließlich der Anwendung von Margin und Padding auf Ihre Elemente. Außerdem lernen Sie, Flexbox-Utilities zu nutzen, um das Layout mit Anzeigeeinstellungen, Flex-Richtung sowie horizontaler und vertikaler Ausrichtung zu steuern. Zusätzlich befassen Sie sich mit Grid-Utilities, um einfache und dennoch leistungsstarke Grid-Layouts zu erstellen und die Einrichtung von Grid-Containern und -Elementen zu beherrschen.

Erfahren Sie, wie Sie Tailwind CSS an die Designanforderungen Ihres Projekts anpassen und flexible Layouts für verschiedene Geräte erstellen.

Herausforderung: Kartenkomponente Erstellen

Aufgabe

Awesome!

Herausforderung: Kartenkomponente Erstellen

Aufgabe