<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>