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 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.