<label class="group relative inline-flex items-center gap-2 text-gray-900 has-disabled:cursor-not-allowed has-disabled:opacity-75">
  <input type="checkbox" value="1" class="peer sr-only">
  <span class="relative flex-none rounded-full bg-gray-300 transition-all duration-150 ease-out peer-checked:bg-blue-500 peer-focus:ring-3 peer-focus:ring-blue-500/50 peer-focus:ring-offset-2 peer-focus:ring-offset-white before:absolute before:top-1 before:left-1 before:rounded-full before:bg-white before:transition-transform before:duration-150 before:ease-out before:content-[''] peer-checked:before:translate-x-full dark:bg-gray-700 dark:peer-checked:bg-blue-500 dark:peer-focus:ring-offset-gray-900 h-5 w-8 before:size-3"></span>
  <span class="flex flex-col text-gray-900 dark:text-gray-100">
    <span class="flex items-center gap-[2px]">
      <span class="text-sm">Switch Label</span>
    </span>
  </span>
</label>