Tailwind switch

        
            
    <div class="flex justify-center">
      <div class="form-check form-switch">
        <input class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm" type="checkbox" role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label inline-block text-gray-800" for="flexSwitchCheckDefault">Default switch checkbox input</label>
      </div>
    </div>
    
        
    

        
            
    <div class="flex justify-center">
      <div class="form-check form-switch">
        <input class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
        <label class="form-check-label inline-block text-gray-800" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
      </div>
    </div>
    
        
    

        
            
    <div class="flex justify-center">
      <div class="form-check form-switch">
        <input class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm pointer-events-none filter-none opacity-50" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
        <label class="form-check-label inline-block text-gray-800 opacity-50" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
      </div>
    </div>
    
        
    

        
            
    <div class="flex justify-center">
      <div class="form-check form-switch">
        <input class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm pointer-events-none filter-none opacity-50" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
        <label class="form-check-label inline-block text-gray-800 opacity-50" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
      </div>
    </div>
    
        
    

        
            
    <div class="flex justify-center">
      <div>
        <div class="form-check form-switch mb-7">
          <input class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm" type="checkbox" role="switch" id="flexSwitchCheckDefault56">
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm" type="checkbox" role="switch" id="flexSwitchCheckChecked76" checked>
        </div>
      </div>
    </div>