Forms are vital in website/ apps where these helps end users to interact with the website smoothly and increase user experience 📝
<div class="flex flex-col bg-sky-300 p-10">
<div class="mb-5 flex flex-col">
<label
for="basic_range"
class="mb-2 block w-max rounded-2xl bg-gray-600 p-4 text-xl font-medium text-white"
>Basic range</label
>
<input id="basic_range" type="range" value="50" />
</div>
<div class="mb-5 mt-5 flex flex-col">
<label
for="range_steps"
class="mb-2 block w-max rounded-2xl bg-green-300 p-4 text-xl font-medium text-red-500"
>Range steps</label
>
<input
id="range_steps"
type="range"
min="0"
max="100"
value="50"
step="10"
/>
</div>
</div><div class="bg-sky-300">
<div class="bg-sky-300 p-4">
<div class="py-4">
<input
class="form-check-input bg-red float-left mt-1 mr-2 h-4 w-4 cursor-pointer rounded-sm border border-blue-500 bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-blue-600 checked:bg-blue-600 focus:outline-none"
type="checkbox"
value=""
id="checkbox1"
/>
<label
class="form-check-label inline-block font-bold text-blue-800"
for="checkbox1"
>
check 1
</label>
</div>
<div class="py-4">
<input
class="form-check-input float-left mt-1 mr-2 h-4 w-4 cursor-pointer rounded-sm border border-blue-500 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-blue-600 checked:bg-blue-600 focus:outline-none"
type="checkbox"
value=""
id="checkbox2"
/>
<label
class="form-check-label inline-block font-bold text-blue-800"
for="checkbox2"
>
check 2
</label>
</div>
<div class="py-4">
<input
class="form-check-input float-left mt-1 mr-2 h-4 w-4 cursor-pointer rounded-sm border border-blue-500 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-blue-600 checked:bg-blue-600 focus:outline-none"
type="checkbox"
value=""
id="checkbox3"
/>
<label
class="form-check-label inline-block font-bold text-blue-800"
for="checkbox3"
>
check 3
</label>
</div>
<div class="py-4">
<input
class="form-check-input float-left mt-1 mr-2 h-4 w-4 cursor-pointer rounded-sm border border-blue-500 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-blue-600 checked:bg-blue-600 focus:outline-none"
type="checkbox"
value=""
id="checkbox4"
/>
<label
class="form-check-label inline-block font-bold text-blue-800"
for="checkbox4"
>
check 4
</label>
</div>
</div>
</div><div class="flex h-screen w-screen items-center justify-center bg-sky-300">
<form>
<div class="text-blue relative focus-within:text-rose-400">
<span class="absolute inset-y-0 right-0 flex items-center pr-2">
<div class="h-4 border-l-2 border-solid border-amber-500 pr-1"></div>
<button class="focus:shadow-outline p-2 focus:outline-none">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="h-6 w-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</span>
<input class="text-red w-56 rounded-full bg-amber-500 py-3 pl-5 text-sm placeholder:text-black focus:bg-white focus:text-gray-900 focus:outline-none" placeholder="Search Here" autocomplete="off" />
</div>
</form>
</div><div
class="flex h-screen w-screen flex-col items-center justify-center bg-sky-300"
>
<div class="revue-form-group relative my-1 w-3/4">
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg
class="h-5 w-5 text-gray-900"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
></path>
<path
d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
></path>
</svg>
</div>
<input
class="block w-full rounded-lg border border-gray-700 bg-rose-200 p-4 pl-12 text-sm text-black placeholder-black"
placeholder="Type your nice email ID"
type="email"
required=""
/>
</div>
<select
class="my-1 block w-3/4 rounded-lg border border-gray-400 bg-yellow-300 p-4 pl-6 text-base font-semibold"
>
<option selected>Favourite CSS framework</option>
<option class="pb-3">Tailwind 🥰</option>
<option class="pb-3">Plain CSS</option>
<option class="pb-3">Bootstrap 😡</option>
<option class="pb-3">Invent your own</option>
</select>
</div><div class="flex h-screen w-screen flex-col justify-center bg-sky-300">
<div class="m-5">
<label
class="mb-4 block text-base font-semibold text-blue-900 underline underline-offset-4"
for="file_input"
>Upload file</label
>
<input
class="block w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-200 p-2 text-sm text-gray-900 placeholder-gray-900 focus:outline-none dark:border-gray-600 dark:text-gray-400"
aria-describedby="file_input_help"
id="file_input"
type="file"
/>
<p class="mt-1 text-sm text-red-500" id="file_input_help">
SVG, PNG, JPG or GIF (MAX. 800x400px).
</p>
</div>
</div><div class="flex h-screen items-center justify-center bg-sky-300">
<div>
<div class="mb-8">
<input class="form-check-input float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-full border border-blue-500 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-red-600 focus:outline-none" type="radio" name="radio1" checked />
<label class="inline-block font-semibold text-gray-800" for="radio1"> Radio 1 </label>
</div>
<div class="mb-8">
<input class="form-check-input float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-full border border-blue-500 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-green-600 focus:outline-none" type="radio" name="radio2" />
<label class="inline-block font-semibold text-gray-800" for="radio2"> Radio 2 </label>
</div>
<div class="mb-8">
<input class="form-check-input float-left mt-1 mr-2 h-4 w-4 cursor-pointer appearance-none rounded-full border border-blue-500 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 checked:border-4 checked:border-yellow-600 focus:outline-none" type="radio" name="radio3" />
<label class="inline-block font-semibold text-gray-800" for="radio3"> Radio 3 </label>
</div>
</div>
</div><div class="flex h-screen items-center justify-center bg-sky-300">
<label for="toggle" class="mr-2 inline-block font-bold text-blue-800">
Toggle me when you are free 😁
</label>
<label
for="toggle"
class="relative grid h-8 w-16 cursor-pointer items-center justify-items-stretch rounded-full"
>
<input type="checkbox" id="toggle" class="peer sr-only" />
<span
class="absolute inline-block h-full w-full rounded-full bg-red-100 drop-shadow-md delay-150 duration-300 peer-checked:bg-blue-500"
></span>
<span
class="absolute mx-1 h-4/5 w-2/5 justify-self-start rounded-full bg-red-900 duration-300 peer-checked:justify-self-end peer-checked:bg-white"
></span>
</label>
</div><div class="flex h-screen items-center justify-between bg-sky-300 p-20">
<div class="flex w-full items-center">
<div class="relative flex flex-col items-center font-bold text-blue-900">
<div
class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-green-600 bg-green-600 py-3 font-bold text-white transition duration-500 ease-in-out"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="h-5 w-5"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"
/>
</svg>
</div>
<div
class="absolute top-0 mt-16 w-32 text-center text-xs font-bold uppercase text-blue-900"
>
Description 1
</div>
</div>
<div
class="flex-auto border-t-2 border-green-600 transition duration-500 ease-in-out"
></div>
</div>
<div class="flex w-full items-center">
<div class="relative flex flex-col items-center font-bold text-blue-900">
<div
class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-green-600 bg-green-600 py-3 font-bold text-white transition duration-500 ease-in-out"
>
2
</div>
<div
class="absolute top-0 mt-16 w-32 text-center text-xs font-bold uppercase text-blue-900"
>
Description 2
</div>
</div>
<div class="flex-auto border-t-2 transition duration-500 ease-in-out"></div>
</div>
<div class="flex w-full items-center">
<div class="relative flex flex-col items-center font-bold text-blue-900">
<div
class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-white py-3 text-black transition duration-500 ease-in-out"
>
3
</div>
<div
class="absolute top-0 mt-16 w-32 text-center text-xs font-bold uppercase text-blue-900"
>
Description 3
</div>
</div>
</div>
</div>