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

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.