Switch

<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-4 w-4">
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
  </span>
</button>

<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-4 w-4">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5 shrink-0 text-current">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5 shrink-0 text-current">
      <path d="m4.222 12.778 4.617 5.276a1 1 0 0 0 1.563-.073L19.779 5">
      </path>
    </svg>
  </span>
</button>

<div class="flex items-center space-x-2">
  <button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-5 w-8">
    <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-4 w-4">
    </span>
  </button>
  <span class="text-sm font-medium text-slate-700">Delete my account</span>
</div>
<div class="flex items-center space-x-2">
  <button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
    <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
    </span>
  </button>
  <span class="text-sm font-medium text-slate-700">Delete my account</span>
</div>

<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-3 w-5">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-2 w-2">
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-4 w-4">
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-200 text-slate-600 h-7 w-12">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-0 h-6 w-6">
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-3 w-5">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-2 h-2 w-2">
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-7 w-12">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-5 h-6 w-6">
  </span>
</button>

<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-blue-600 text-blue-600 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-red-600 text-red-600 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-emerald-600 text-emerald-600 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
  </span>
</button>
<button type="button" role="switch" aria-checked="false" class="relative inline-flex shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent transition focus:outline-none focus:ring focus:ring-blue-200 bg-slate-950 text-slate-950 h-5 w-8">
  <span aria-hidden="true" class="pointer-events-none flex items-center justify-center rounded-full bg-white transition will-change-transform translate-x-3 h-4 w-4">
  </span>
</button>