Switch

Switches are the preferred way to adjust settings. They're used to control binary options – think On/Off or True/False.

                
<!-- switch with icon -->
<div class="toggle-switch relative inline-flex w-[52px] h-8">
  <input id="check3" class="toggle-checkbox hidden" type="checkbox">
  <label for="check3" class="toggle-icon relative block w-12 h-8 ropjaksldnk transition-color duration-150 ease-out"></label>
</div>

<!-- switch normal -->
<div class="toggle-switch relative inline-flex w-[52px] h-8">
  <input id="check4" class="toggle-checkbox hidden" type="checkbox">
  <label for="check4" class="toggle-default relative block w-12 h-8 ropjaksldnk transition-color duration-150 ease-out"></label>
</div>