Challenge: Forms

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.