Task

Use Tailwind CSS to complete the styling of a form with inputs, textareas, radio buttons, and a switch.

Fill in the blanks with the appropriate Tailwind CSS classes to achieve the desired styling.

• Inputs and Textareas :

  • Light gray border ( border-gray-300 );

  • Medium rounded corners ( rounded-md );

  • Focus state with a blue ring ( focus:ring-2 and focus:ring-blue-500 ).

• Submit Button :

  • Primary blue background ( bg-blue-500 );

  • Darker blue on hover ( hover:bg-blue-700 );

  • Rounded corners ( rounded );

  • Focus state with a ring ( focus:outline-none , focus:ring-2 , and focus:ring-blue-500 ).

1. Border Color : Use border-gray-300 for a light gray border;

2. Rounded Corners : Use rounded-md for medium rounded corners;

3. Focus Ring : Use focus:ring-2 for adding a ring on focus and focus:ring-blue-500 for blue color.

4. Submit Button Hover : Use hover:bg-blue-700 for a darker blue on hover;

5. Submit Button Ring : Use focus:outline-none to remove default focus outline, focus:ring-2 to add a ring on focus, and focus:ring-blue-500 to set the ring color.