Toggle

<div class="space-x-3">
  <label for="example1" class="relative inline-flex cursor-pointer items-center">
    <input type="checkbox" id="example1" class="peer sr-only" />
    <div
      class="h-6 w-11 rounded-full bg-gray-100 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
    ></div>
  </label>
  <label for="example2" class="relative inline-flex cursor-pointer items-center">
    <input type="checkbox" id="example2" class="peer sr-only" checked />
    <div
      class="h-6 w-11 rounded-full bg-gray-100 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
    ></div>
  </label>
</div>

<div class="space-x-3">
  <label for="example3" class="relative inline-flex cursor-pointer items-center">
    <input type="checkbox" id="example3" class="peer sr-only" disabled />
    <div
      class="h-6 w-11 rounded-full bg-gray-100 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
    ></div>
  </label>
  <label for="example4" class="relative inline-flex cursor-pointer items-center">
    <input type="checkbox" id="example4" class="peer sr-only" checked disabled />
    <div
      class="h-6 w-11 rounded-full bg-gray-100 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
    ></div>
  </label>
</div>

<div class="space-y-4">
  <div class="flex items-center space-x-3">
    <label for="example5" class="relative inline-flex cursor-pointer items-center">
      <input type="checkbox" id="example5" class="peer sr-only" />
      <div
        class="h-5 w-9 rounded-full bg-gray-100 after:absolute after:top-0.5 after:left-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
      ></div>
    </label>
    <label for="example6" class="relative inline-flex cursor-pointer items-center">
      <input type="checkbox" id="example6" class="peer sr-only" checked />
      <div
        class="h-5 w-9 rounded-full bg-gray-100 after:absolute after:top-0.5 after:left-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
      ></div>
    </label>
    <span class="text-sm text-gray-500">Small</span>
  </div>
  <div class="flex items-center space-x-3">
    <label for="example7" class="relative inline-flex cursor-pointer items-center">
      <input type="checkbox" id="example7" class="peer sr-only" />
      <div
        class="h-6 w-11 rounded-full bg-gray-100 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
      ></div>
    </label>
    <label for="example8" class="relative inline-flex cursor-pointer items-center">
      <input type="checkbox" id="example8" class="peer sr-only" checked />
      <div
        class="h-6 w-11 rounded-full bg-gray-100 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
      ></div>
    </label>
    <span class="text-sm text-gray-500">Normal</span>
  </div>
  <div class="flex items-center space-x-3">
    <label for="example9" class="relative inline-flex cursor-pointer items-center">
      <input type="checkbox" id="example9" class="peer sr-only" />
      <div
        class="h-8 w-14 rounded-full bg-gray-100 after:absolute after:top-1 after:left-1 after:h-6 after:w-6 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
      ></div>
    </label>
    <label for="example10" class="relative inline-flex cursor-pointer items-center">
      <input type="checkbox" id="example10" class="peer sr-only" checked />
      <div
        class="h-8 w-14 rounded-full bg-gray-100 after:absolute after:top-1 after:left-1 after:h-6 after:w-6 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"
      ></div>
    </label>
    <span class="text-sm text-gray-500">Large</span>
  </div>
</div>