Taak

Gebruik Tailwind CSS om de styling van een formulier met invoervelden, tekstvakken, keuzerondjes en een schakelaar te voltooien.

Vul de lege plekken in met de juiste Tailwind CSS-klassen om de gewenste opmaak te bereiken.

• Invoervelden en Tekstvakken:
  • Lichtgrijze rand (border-gray-300);
  • Middelmatig afgeronde hoeken (rounded-md);
  • Focusstatus met een blauwe ring (focus:ring-2 en focus:ring-blue-500).
• Verzendknop:
  • Primaire blauwe achtergrond (bg-blue-500);
  • Donkerder blauw bij hover (hover:bg-blue-700);
  • Afgeronde hoeken (rounded);
  • Focusstatus met een ring (focus:outline-none, focus:ring-2 en focus:ring-blue-500).

1. Randkleur: Gebruik border-gray-300 voor een lichtgrijze rand;
2. Afgeronde hoeken: Gebruik rounded-md voor middelmatig afgeronde hoeken;
3. Focus-ring: Gebruik focus:ring-2 om een ring toe te voegen bij focus en focus:ring-blue-500 voor een blauwe kleur.
4. Hover-effect verzendknop: Gebruik hover:bg-blue-700 voor een donkerdere blauwe kleur bij hover;
5. Ring verzendknop bij focus: Gebruik focus:outline-none om de standaard focus-outline te verwijderen, focus:ring-2 om een ring toe te voegen bij focus, en focus:ring-blue-500 om de ringkleur in te stellen.