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