<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Forms - Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-md mx-auto mt-10 p-6 bg-white shadow-md rounded-lg">
<form>
<!-- Text Input -->
<div class="mb-4">
<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>
<!-- Textarea -->
<div class="mb-4">
<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>
<!-- Radio Buttons -->
<div class="mb-4">
<span class="text-gray-700">Gender</span>
<div class="mt-2">
<label class="inline-flex items-center">
<input
type="radio"
class="form-radio text-blue-500"
name="gender"
value="male"
/>
<span class="ml-2">Male</span>
</label>
<label class="inline-flex items-center ml-6">
<input
type="radio"
class="form-radio text-blue-500"
name="gender"
value="female"
/>
<span class="ml-2">Female</span>
</label>
</div>
</div>
<!-- Switch -->
<div class="mb-4">
<label class="flex items-center">
<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>
<!-- Submit Button -->
<div class="mb-4">
<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>