Compito

Utilizzare Tailwind CSS per completare la stilizzazione di un modulo con campi di input, aree di testo, pulsanti radio e uno switch.

Compilare gli spazi vuoti con le classi Tailwind CSS appropriate per ottenere lo stile desiderato.

• Input e Textarea:
  • Bordo grigio chiaro (border-gray-300);
  • Angoli mediamente arrotondati (rounded-md);
  • Stato di focus con anello blu (focus:ring-2 e focus:ring-blue-500).
• Pulsante di invio:
  • Sfondo blu primario (bg-blue-500);
  • Blu più scuro al passaggio del mouse (hover:bg-blue-700);
  • Angoli arrotondati (rounded);
  • Stato di focus con anello (focus:outline-none, focus:ring-2 e focus:ring-blue-500).

1. Colore del bordo: Utilizzare border-gray-300 per un bordo grigio chiaro;
2. Angoli arrotondati: Utilizzare rounded-md per angoli mediamente arrotondati;
3. Anello di focus: Utilizzare focus:ring-2 per aggiungere un anello al focus e focus:ring-blue-500 per il colore blu.
4. Hover del pulsante di invio: Utilizzare hover:bg-blue-700 per un blu più scuro al passaggio del mouse;
5. Anello del pulsante di invio: Utilizzare focus:outline-none per rimuovere il contorno di focus predefinito, focus:ring-2 per aggiungere un anello al focus e focus:ring-blue-500 per impostare il colore dell'anello.