Herausforderung: Formulare
Aufgabe
Verwenden Sie Tailwind CSS, um das Styling eines Formulars mit Eingabefeldern, Textbereichen, Optionsfeldern und einem Schalter abzuschließen.
Füllen Sie die Lücken mit den entsprechenden Tailwind CSS-Klassen aus, um das gewünschte Styling zu erreichen.
- Eingabefelder und Textbereiche:
- Hellgrauer Rand (
border-gray-300
); - Mittel abgerundete Ecken (
rounded-md
); - Fokuszustand mit einem blauen Ring (
focus:ring-2
undfocus:ring-blue-500
).
- Hellgrauer Rand (
- Absenden-Button:
- Primär blauer Hintergrund (
bg-blue-500
); - Dunkleres Blau beim Hover (
hover:bg-blue-700
); - Abgerundete Ecken (
rounded
); - Fokuszustand mit einem Ring (
focus:outline-none
,focus:ring-2
, undfocus:ring-blue-500
).
- Primär blauer Hintergrund (
index.html
- Randfarbe: Verwenden Sie
border-gray-300
für einen hellgrauen Rand; - Abgerundete Ecken: Verwenden Sie
rounded-md
für mittel abgerundete Ecken; - Fokus-Ring: Verwenden Sie
focus:ring-2
um einen Ring bei Fokus hinzuzufügen undfocus:ring-blue-500
für blaue Farbe. - Hover-Effekt für den Absenden-Button: Verwenden Sie
hover:bg-blue-700
für ein dunkleres Blau beim Hover; - Fokus-Ring für den Absenden-Button: Verwenden Sie
focus:outline-none
um den Standard-Fokusrahmen zu entfernen,focus:ring-2
um einen Ring bei Fokus hinzuzufügen, undfocus:ring-blue-500
um die Ringfarbe festzulegen.
index.html
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 6
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 3.57
Herausforderung: Formulare
Swipe um das Menü anzuzeigen
Aufgabe
Verwenden Sie Tailwind CSS, um das Styling eines Formulars mit Eingabefeldern, Textbereichen, Optionsfeldern und einem Schalter abzuschließen.
Füllen Sie die Lücken mit den entsprechenden Tailwind CSS-Klassen aus, um das gewünschte Styling zu erreichen.
- Eingabefelder und Textbereiche:
- Hellgrauer Rand (
border-gray-300
); - Mittel abgerundete Ecken (
rounded-md
); - Fokuszustand mit einem blauen Ring (
focus:ring-2
undfocus:ring-blue-500
).
- Hellgrauer Rand (
- Absenden-Button:
- Primär blauer Hintergrund (
bg-blue-500
); - Dunkleres Blau beim Hover (
hover:bg-blue-700
); - Abgerundete Ecken (
rounded
); - Fokuszustand mit einem Ring (
focus:outline-none
,focus:ring-2
, undfocus:ring-blue-500
).
- Primär blauer Hintergrund (
index.html
- Randfarbe: Verwenden Sie
border-gray-300
für einen hellgrauen Rand; - Abgerundete Ecken: Verwenden Sie
rounded-md
für mittel abgerundete Ecken; - Fokus-Ring: Verwenden Sie
focus:ring-2
um einen Ring bei Fokus hinzuzufügen undfocus:ring-blue-500
für blaue Farbe. - Hover-Effekt für den Absenden-Button: Verwenden Sie
hover:bg-blue-700
für ein dunkleres Blau beim Hover; - Fokus-Ring für den Absenden-Button: Verwenden Sie
focus:outline-none
um den Standard-Fokusrahmen zu entfernen,focus:ring-2
um einen Ring bei Fokus hinzuzufügen, undfocus:ring-blue-500
um die Ringfarbe festzulegen.
index.html
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 6