<div class="flex flex-col p-10">
  <div class="flex flex-col mb-5">
    <label for="slider_basic_range" class="block mb-2 text-xl font-medium text-gray-900" >Basic range</label >
    <input id="slider_basic_range" type="range" value="50" />
  </div>
  <div class="flex flex-col mb-5 mt-5">
    <label for="slider_range_steps" class="block mb-2 text-xl font-medium text-gray-900" >Range steps</label >
    <input id="slider_range_steps" type="range" min="0" max="100" value="50" step="10" />
  </div>
</div>

<div className="flex justify-center mt-56 bg-slate-300 w-1/2 mx-auto p-4">
  <div>
    <div className="form-check">
      <input className="form-check-input h-4 w-4 border  border-blue-500 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer " type="checkbox" value="" id="flexCheckDefault"/>
      <label className="form-check-label inline-block text-gray-800" for="flexCheckDefault">
        Checkbox
      </label>
    </div>
    <div className="form-check">
      <input className="form-check-input h-4 w-4 border  border-blue-500 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer " type="checkbox" value="" id="flexCheckDefault"/>
      <label className="form-check-label inline-block text-gray-800" for="flexCheckDefault">
        Checkbox
      </label>
    </div>
    <div className="form-check">
      <input className="form-check-input h-4 w-4 border  border-blue-500 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer " type="checkbox" value="" id="flexCheckDefault"/>
      <label className="form-check-label inline-block text-gray-800" for="flexCheckDefault">
        Checkbox
      </label>
    </div>
    <div className="form-check">
      <input className="form-check-input h-4 w-4 border  border-blue-500 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer " type="checkbox" value="" id="flexCheckDefault"/>
      <label className="form-check-label inline-block text-gray-800" for="flexCheckDefault">
        Checkbox
      </label>
    </div>
  </div>
</div>

<div class="items-center justify-center flex h-screen w-screen">
  <form class="mx-5 w-3/4">   
    <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300">Search</label>
    <div class="relative">
        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <input type="search" id="default-search" class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-full border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search..." required>
    </div>
</form>
</div>

<div class="flex h-screen w-screen flex-col items-center justify-center">
  <div class="revue-form-group relative my-1 w-3/4">
    <label for="member_email" class="mb-2 hidden text-sm font-medium text-gray-900 dark:text-gray-300">Email address</label>
    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
      <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" 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="revue-form-field block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pl-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500" placeholder="Your email address..." type="email" name="member[email]" id="member_email" required="" />
  </div>

  <select id="countries" class="my-1 block w-3/4 rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500">
    <option selected>Select</option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
  </select>
</div>

<div class="flex h-screen w-screen flex-col justify-center">
  <div class="m-5">
    <label class="mb-2 block text-sm font-medium text-gray-900" for="file_input">Upload file</label>
    <input class="block w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-200 text-sm text-gray-900 focus:outline-none dark:border-gray-600 dark:text-gray-400 dark:placeholder-gray-400" aria-describedby="file_input_help" id="file_input" type="file" />
    <p class="mt-1 text-sm text-gray-500" id="file_input_help">SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
  </div>
</div>

<div class="flex justify-center items-center h-screen w-screen">
  <div>
    <div class="form-check">
      <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-blue-500 bg-white checked:border-4 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
      <label class="form-check-label inline-block text-gray-800" for="flexRadioDefault1">
        Radio
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-blue-500 bg-white checked:border-4 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
      <label class="form-check-label inline-block text-gray-800" for="flexRadioDefault2">
        Radio
      </label>
      <div class="form-check">
      <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-blue-500 bg-white checked:border-4 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
      <label class="form-check-label inline-block text-gray-800" for="flexRadioDefault1">
        Radio
      </label>
      
    </div>
    </div>
    </div>
  </div>
</div>

<div class="flex justify-center items-center h-screen w-screen">
  <label
    for="toggle"
    class="form-check-label inline-block text-gray-800 mr-2">
    Toggle me.
  </label>

  <label
    for="toggle"
    class="grid justify-items-stretch relative items-center cursor-pointer w-14 h-7 rounded-full">
    <input type="checkbox" id="toggle" class="sr-only peer" />
    <span class="drop-shadow-md delay-150 bg-gray-200 w-full h-full absolute inline-block rounded-full peer-checked:bg-blue-500 duration-300"></span>
    <span class="w-2/5 h-4/5 mx-1 absolute justify-self-start bg-gray-400 rounded-full peer-checked:bg-white peer-checked:justify-self-end duration-300"></span>
  </label>
</div>

<div class="mx-4 p-4 flex justify-between items-center">
  <!--  Step 1  -->
  <div class="flex w-full items-center">
    <div class="relative flex flex-col items-center text-teal-600">
      <div class="rounded-full transition duration-500 ease-in-out border-2 h-12 w-12 flex items-center justify-center py-3 bg-green-600 text-white font-bold border-green-600">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-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 text-center mt-16 w-32 text-xs font-medium uppercase">
        Description 1
      </div>
    </div>
    <!--   Line   -->
    <div class="flex-auto border-t-2 transition duration-500 ease-in-out border-green-600"></div>
  </div>
  <!--  Step 2  -->
  <div class="flex w-full items-center">
    <div class="relative flex flex-col items-center text-teal-600">
      <div class="rounded-full transition duration-500 ease-in-out border-2 h-12 w-12 flex items-center justify-center py-3 bg-green-600 text-white font-bold border-green-600">2</div>
      <div class="absolute top-0 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">
        Description 2
      </div>
    </div>
    <!--  Line    -->
    <div class="flex-auto border-t-2 transition duration-500 ease-in-out"></div>
  </div>
  <!--  Step 3  -->
  <div class="flex w-full items-center">
    <div class="relative flex flex-col items-center text-teal-600">
      <div class="rounded-full transition duration-500 ease-in-out border-2 border-gray-300 h-12 w-12 flex items-center justify-center py-3">3</div>
      <div class="absolute top-0 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-400">
        Description 3
      </div>
    </div>
  </div>
</div>