Challenge: Creating 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).

index.html

<!DOCTYPE html>

<head>

<title>Challenge: Forms - Task</title>

</head>

<form>

<label

class="block text-gray-700 text-sm font-bold mb-2"

for="username"

Username

</label>

<input

class="shadow appearance-none border _____ _____ p-2 w-full focus:_____ focus:_____"

id="username"

type="text"

placeholder="Enter your username"

</div>

<label

class="block text-gray-700 text-sm font-bold mb-2"

for="message"

Message

</label>

<textarea

class="shadow appearance-none border _____ _____ p-2 w-full focus:_____ focus:_____"

index.html

<!DOCTYPE html>

<head>

<title>Challenge: Forms - Solution</title>

</head>

<form>

<label

class="block text-gray-700 text-sm font-bold mb-2"

for="username"

Username

</label>

<input

class="shadow appearance-none border border-gray-300 rounded-md p-2 w-full focus:ring-2 focus:ring-blue-500"

id="username"

type="text"

placeholder="Enter your username"

</div>

<label

class="block text-gray-700 text-sm font-bold mb-2"

for="message"

Message

</label>

<textarea

class="shadow appearance-none border border-gray-300 rounded-md p-2 w-full focus:ring-2 focus:ring-blue-500"

id="message"

rows="4"

placeholder="Enter your message"

></textarea>

</div>

<span class="text-gray-700">Gender</span>

<input

type="radio"

class="form-radio text-blue-500"

name="gender"

value="male"

</label>

<input

type="radio"

class="form-radio text-blue-500"

name="gender"

value="female"

<span class="ml-2">Female</span>

</label>

</div>

<span class="mr-2 text-gray-700">Enable notifications</span>

<input

type="checkbox"

class="form-checkbox h-6 w-6 text-green-500"

</label>

</div>

<button

class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"

Submit

</button>

</div>

</form>

</div>

</body>

</html>

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 3. Розділ 6