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.