## Aufgabe
Mit Tailwind CSS das Styling eines Formulars mit Eingabefeldern, Textbereichen, Optionsfeldern und einem Schalter vervollständigen.

Die Lücken mit den passenden Tailwind CSS-Klassen ausfüllen, um das gewünschte Styling zu erreichen.
- **Eingabefelder und Textbereiche**:
   - Hellgrauer Rahmen (`border-gray-300`);
   - Mittelstark abgerundete Ecken (`rounded-md`);
   - Fokus-Zustand mit blauem Ring (`focus:ring-2` und `focus:ring-blue-500`).
- **Absende-Button**:
   - Primärer blauer Hintergrund (`bg-blue-500`);
   - Dunkleres Blau beim Hover (`hover:bg-blue-700`);
   - Abgerundete Ecken (`rounded`);
   - Fokus-Zustand mit Ring (`focus:outline-none`, `focus:ring-2` und `focus:ring-blue-500`).

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBGb3JtcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5IGNsYXNzPSJiZy1ncmF5LTEwMCBwLTgiPgogICAgPGRpdiBjbGFzcz0ibWF4LXctbWQgbXgtYXV0byBtdC0xMCBwLTYgYmctd2hpdGUgc2hhZG93LW1kIHJvdW5kZWQtbGciPgogICAgICA8Zm9ybT4KICAgICAgICA8IS0tIFRleHQgSW5wdXQgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0ibWItNCI+CiAgICAgICAgICA8bGFiZWwKICAgICAgICAgICAgY2xhc3M9ImJsb2NrIHRleHQtZ3JheS03MDAgdGV4dC1zbSBmb250LWJvbGQgbWItMiIKICAgICAgICAgICAgZm9yPSJ1c2VybmFtZSIKICAgICAgICAgID4KICAgICAgICAgICAgVXNlcm5hbWUKICAgICAgICAgIDwvbGFiZWw+CiAgICAgICAgICA8aW5wdXQKICAgICAgICAgICAgY2xhc3M9InNoYWRvdyBhcHBlYXJhbmNlLW5vbmUgYm9yZGVyIF9fX19fIF9fX19fIHAtMiB3LWZ1bGwgZm9jdXM6X19fX18gZm9jdXM6X19fX18iCiAgICAgICAgICAgIGlkPSJ1c2VybmFtZSIKICAgICAgICAgICAgdHlwZT0idGV4dCIKICAgICAgICAgICAgcGxhY2Vob2xkZXI9IkVudGVyIHlvdXIgdXNlcm5hbWUiCiAgICAgICAgICAvPgogICAgICAgIDwvZGl2PgogICAgICAgIDwhLS0gVGV4dGFyZWEgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0ibWItNCI+CiAgICAgICAgICA8bGFiZWwKICAgICAgICAgICAgY2xhc3M9ImJsb2NrIHRleHQtZ3JheS03MDAgdGV4dC1zbSBmb250LWJvbGQgbWItMiIKICAgICAgICAgICAgZm9yPSJtZXNzYWdlIgogICAgICAgICAgPgogICAgICAgICAgICBNZXNzYWdlCiAgICAgICAgICA8L2xhYmVsPgogICAgICAgICAgPHRleHRhcmVhCiAgICAgICAgICAgIGNsYXNzPSJzaGFkb3cgYXBwZWFyYW5jZS1ub25lIGJvcmRlciBfX19fXyBfX19fXyBwLTIgdy1mdWxsIGZvY3VzOl9fX19fIGZvY3VzOl9fX19fIgogICAgICAgICAgICBpZD0ibWVzc2FnZSIKICAgICAgICAgICAgcm93cz0iNCIKICAgICAgICAgICAgcGxhY2Vob2xkZXI9IkVudGVyIHlvdXIgbWVzc2FnZSIKICAgICAgICAgID48L3RleHRhcmVhPgogICAgICAgIDwvZGl2PgogICAgICAgIDwhLS0gUmFkaW8gQnV0dG9ucyAtLT4KICAgICAgICA8ZGl2IGNsYXNzPSJtYi00Ij4KICAgICAgICAgIDxzcGFuIGNsYXNzPSJ0ZXh0LWdyYXktNzAwIj5HZW5kZXI8L3NwYW4+CiAgICAgICAgICA8ZGl2IGNsYXNzPSJtdC0yIj4KICAgICAgICAgICAgPGxhYmVsIGNsYXNzPSJpbmxpbmUtZmxleCBpdGVtcy1jZW50ZXIiPgogICAgICAgICAgICAgIDxpbnB1dAogICAgICAgICAgICAgICAgdHlwZT0icmFkaW8iCiAgICAgICAgICAgICAgICBjbGFzcz0iZm9ybS1yYWRpbyB0ZXh0LWJsdWUtNTAwIgogICAgICAgICAgICAgICAgbmFtZT0iZ2VuZGVyIgogICAgICAgICAgICAgICAgdmFsdWU9Im1hbGUiCiAgICAgICAgICAgICAgLz4KICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0ibWwtMiI+TWFsZTwvc3Bhbj4KICAgICAgICAgICAgPC9sYWJlbD4KICAgICAgICAgICAgPGxhYmVsIGNsYXNzPSJpbmxpbmUtZmxleCBpdGVtcy1jZW50ZXIgbWwtNiI+CiAgICAgICAgICAgICAgPGlucHV0CiAgICAgICAgICAgICAgICB0eXBlPSJyYWRpbyIKICAgICAgICAgICAgICAgIGNsYXNzPSJmb3JtLXJhZGlvIHRleHQtYmx1ZS01MDAiCiAgICAgICAgICAgICAgICBuYW1lPSJnZW5kZXIiCiAgICAgICAgICAgICAgICB2YWx1ZT0iZmVtYWxlIgogICAgICAgICAgICAgIC8+CiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9Im1sLTIiPkZlbWFsZTwvc3Bhbj4KICAgICAgICAgICAgPC9sYWJlbD4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICAgIDwhLS0gU3dpdGNoIC0tPgogICAgICAgIDxkaXYgY2xhc3M9Im1iLTQiPgogICAgICAgICAgPGxhYmVsIGNsYXNzPSJmbGV4IGl0ZW1zLWNlbnRlciI+CiAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJtci0yIHRleHQtZ3JheS03MDAiPkVuYWJsZSBub3RpZmljYXRpb25zPC9zcGFuPgogICAgICAgICAgICA8aW5wdXQKICAgICAgICAgICAgICB0eXBlPSJjaGVja2JveCIKICAgICAgICAgICAgICBjbGFzcz0iZm9ybS1jaGVja2JveCBoLTYgdy02IHRleHQtZ3JlZW4tNTAwIgogICAgICAgICAgICAvPgogICAgICAgICAgPC9sYWJlbD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8IS0tIFN1Ym1pdCBCdXR0b24gLS0+CiAgICAgICAgPGRpdiBjbGFzcz0ibWItNCI+CiAgICAgICAgICA8YnV0dG9uCiAgICAgICAgICAgIGNsYXNzPSJfX19fXyBob3ZlcjpfX19fXyB0ZXh0LXdoaXRlIGZvbnQtYm9sZCBweS0yIHB4LTQgX19fX18gZm9jdXM6X19fX18gZm9jdXM6X19fX18gZm9jdXM6X19fX18iCiAgICAgICAgICA+CiAgICAgICAgICAgIFN1Ym1pdAogICAgICAgICAgPC9idXR0b24+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZm9ybT4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

1. **Rahmenfarbe**: Verwendung von `border-gray-300` für einen hellgrauen Rahmen;
2. **Abgerundete Ecken**: Verwendung von `rounded-md` für mittelstark abgerundete Ecken;
3. **Fokus-Ring**: Verwendung von `focus:ring-2` für einen Ring bei Fokus und `focus:ring-blue-500` für blaue Farbe.
4. **Hover-Effekt für Absenden-Button**: Verwendung von `hover:bg-blue-700` für ein dunkleres Blau beim Überfahren mit der Maus;
5. **Fokus-Ring für Absenden-Button**: Verwendung von `focus:outline-none` zum Entfernen der Standard-Fokus-Kontur, `focus:ring-2` zum Hinzufügen eines Rings bei Fokus und `focus:ring-blue-500` zur Festlegung der Ringfarbe.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBGb3JtcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keSBjbGFzcz0iYmctZ3JheS0xMDAgcC04Ij4KICAgIDxkaXYgY2xhc3M9Im1heC13LW1kIG14LWF1dG8gbXQtMTAgcC02IGJnLXdoaXRlIHNoYWRvdy1tZCByb3VuZGVkLWxnIj4KICAgICAgPGZvcm0+CiAgICAgICAgPCEtLSBUZXh0IElucHV0IC0tPgogICAgICAgIDxkaXYgY2xhc3M9Im1iLTQiPgogICAgICAgICAgPGxhYmVsCiAgICAgICAgICAgIGNsYXNzPSJibG9jayB0ZXh0LWdyYXktNzAwIHRleHQtc20gZm9udC1ib2xkIG1iLTIiCiAgICAgICAgICAgIGZvcj0idXNlcm5hbWUiCiAgICAgICAgICA+CiAgICAgICAgICAgIFVzZXJuYW1lCiAgICAgICAgICA8L2xhYmVsPgogICAgICAgICAgPGlucHV0CiAgICAgICAgICAgIGNsYXNzPSJzaGFkb3cgYXBwZWFyYW5jZS1ub25lIGJvcmRlciBib3JkZXItZ3JheS0zMDAgcm91bmRlZC1tZCBwLTIgdy1mdWxsIGZvY3VzOnJpbmctMiBmb2N1czpyaW5nLWJsdWUtNTAwIgogICAgICAgICAgICBpZD0idXNlcm5hbWUiCiAgICAgICAgICAgIHR5cGU9InRleHQiCiAgICAgICAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciB5b3VyIHVzZXJuYW1lIgogICAgICAgICAgLz4KICAgICAgICA8L2Rpdj4KICAgICAgICA8IS0tIFRleHRhcmVhIC0tPgogICAgICAgIDxkaXYgY2xhc3M9Im1iLTQiPgogICAgICAgICAgPGxhYmVsCiAgICAgICAgICAgIGNsYXNzPSJibG9jayB0ZXh0LWdyYXktNzAwIHRleHQtc20gZm9udC1ib2xkIG1iLTIiCiAgICAgICAgICAgIGZvcj0ibWVzc2FnZSIKICAgICAgICAgID4KICAgICAgICAgICAgTWVzc2FnZQogICAgICAgICAgPC9sYWJlbD4KICAgICAgICAgIDx0ZXh0YXJlYQogICAgICAgICAgICBjbGFzcz0ic2hhZG93IGFwcGVhcmFuY2Utbm9uZSBib3JkZXIgYm9yZGVyLWdyYXktMzAwIHJvdW5kZWQtbWQgcC0yIHctZnVsbCBmb2N1czpyaW5nLTIgZm9jdXM6cmluZy1ibHVlLTUwMCIKICAgICAgICAgICAgaWQ9Im1lc3NhZ2UiCiAgICAgICAgICAgIHJvd3M9IjQiCiAgICAgICAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciB5b3VyIG1lc3NhZ2UiCiAgICAgICAgICA+PC90ZXh0YXJlYT4KICAgICAgICA8L2Rpdj4KICAgICAgICA8IS0tIFJhZGlvIEJ1dHRvbnMgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0ibWItNCI+CiAgICAgICAgICA8c3BhbiBjbGFzcz0idGV4dC1ncmF5LTcwMCI+R2VuZGVyPC9zcGFuPgogICAgICAgICAgPGRpdiBjbGFzcz0ibXQtMiI+CiAgICAgICAgICAgIDxsYWJlbCBjbGFzcz0iaW5saW5lLWZsZXggaXRlbXMtY2VudGVyIj4KICAgICAgICAgICAgICA8aW5wdXQKICAgICAgICAgICAgICAgIHR5cGU9InJhZGlvIgogICAgICAgICAgICAgICAgY2xhc3M9ImZvcm0tcmFkaW8gdGV4dC1ibHVlLTUwMCIKICAgICAgICAgICAgICAgIG5hbWU9ImdlbmRlciIKICAgICAgICAgICAgICAgIHZhbHVlPSJtYWxlIgogICAgICAgICAgICAgIC8+CiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9Im1sLTIiPk1hbGU8L3NwYW4+CiAgICAgICAgICAgIDwvbGFiZWw+CiAgICAgICAgICAgIDxsYWJlbCBjbGFzcz0iaW5saW5lLWZsZXggaXRlbXMtY2VudGVyIG1sLTYiPgogICAgICAgICAgICAgIDxpbnB1dAogICAgICAgICAgICAgICAgdHlwZT0icmFkaW8iCiAgICAgICAgICAgICAgICBjbGFzcz0iZm9ybS1yYWRpbyB0ZXh0LWJsdWUtNTAwIgogICAgICAgICAgICAgICAgbmFtZT0iZ2VuZGVyIgogICAgICAgICAgICAgICAgdmFsdWU9ImZlbWFsZSIKICAgICAgICAgICAgICAvPgogICAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJtbC0yIj5GZW1hbGU8L3NwYW4+CiAgICAgICAgICAgIDwvbGFiZWw+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgICA8IS0tIFN3aXRjaCAtLT4KICAgICAgICA8ZGl2IGNsYXNzPSJtYi00Ij4KICAgICAgICAgIDxsYWJlbCBjbGFzcz0iZmxleCBpdGVtcy1jZW50ZXIiPgogICAgICAgICAgICA8c3BhbiBjbGFzcz0ibXItMiB0ZXh0LWdyYXktNzAwIj5FbmFibGUgbm90aWZpY2F0aW9uczwvc3Bhbj4KICAgICAgICAgICAgPGlucHV0CiAgICAgICAgICAgICAgdHlwZT0iY2hlY2tib3giCiAgICAgICAgICAgICAgY2xhc3M9ImZvcm0tY2hlY2tib3ggaC02IHctNiB0ZXh0LWdyZWVuLTUwMCIKICAgICAgICAgICAgLz4KICAgICAgICAgIDwvbGFiZWw+CiAgICAgICAgPC9kaXY+CiAgICAgICAgPCEtLSBTdWJtaXQgQnV0dG9uIC0tPgogICAgICAgIDxkaXYgY2xhc3M9Im1iLTQiPgogICAgICAgICAgPGJ1dHRvbgogICAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQgZm9jdXM6b3V0bGluZS1ub25lIGZvY3VzOnJpbmctMiBmb2N1czpyaW5nLWJsdWUtNTAwIgogICAgICAgICAgPgogICAgICAgICAgICBTdWJtaXQKICAgICAgICAgIDwvYnV0dG9uPgogICAgICAgIDwvZGl2PgogICAgICA8L2Zvcm0+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4K

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: Formulare Erstellen

Aufgabe

Awesome!

Herausforderung: Formulare Erstellen

Aufgabe