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 und focus:ring-blue-500).

• 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, und focus:ring-blue-500).

1. Randfarbe: Verwenden Sie border-gray-300 für einen hellgrauen Rand;

2. Abgerundete Ecken: Verwenden Sie rounded-md für mittel abgerundete Ecken;

3. Fokus-Ring: Verwenden Sie focus:ring-2 um einen Ring bei Fokus hinzuzufügen und focus:ring-blue-500 für blaue Farbe.

4. Hover-Effekt für den Absenden-Button: Verwenden Sie hover:bg-blue-700 für ein dunkleres Blau beim Hover;

5. 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, und focus:ring-blue-500 um die Ringfarbe festzulegen.