Skip to content
On this page

Switch

html
<div class="flex items-center space-x-2">
  <label
    class="relative inline-flex h-6 w-[46px] items-center rounded-full transition-all duration-150 cursor-pointer"
  >
    <input type="checkbox" value="" checked="checked" class="sr-only peer" />
    <span
      class="w-11 h-6 bg-gray-200 peer-focus:outline-none ring-0 rounded-full peer dark:bg-gray-900 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-black-500"
    ></span>
  </label>
  <span
    class="text-sm text-slate-600 font-Inter font-normal"
    style="font-family: Inter, Bangla226, sans-serif;"
    >Active Switch</span
  >
</div>

COPYRIGHT © 2022 Codeshaper, All rights reserved.