Switches
<button
type="button"
role="switch"
aria-checked="false"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="false"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none flex h-4 w-4 translate-x-0 items-center justify-center rounded-full bg-white transition will-change-transform">
<svg class="h-2.5 w-2.5 shrink-0 stroke-gray-600" viewBox="0 0 256 256">
<line x1="200" y1="56" x2="56" y2="200" stroke-linecap="round" stroke-linejoin="round" stroke-width="36"></line>
<line x1="200" y1="200" x2="56" y2="56" stroke-linecap="round" stroke-linejoin="round" stroke-width="36"></line>
</svg>
</span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none flex h-4 w-4 translate-x-3 items-center justify-center rounded-full bg-white transition will-change-transform">
<svg class="h-2.5 w-2.5 shrink-0 stroke-blue-700" viewBox="0 0 256 256">
<polyline
points="216 72 104 184 48 128"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="36"
fill="none"></polyline>
</svg>
</span>
</button>
<div class="flex items-center space-x-2">
<button
type="button"
role="switch"
aria-checked="false"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
</button>
<span class="text-sm font-medium text-gray-700">Delete my account</span>
</div>
<div class="flex items-center space-x-2">
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>
<span class="text-sm font-medium text-gray-700">Delete my account</span>
</div>
Delete my account
Delete my account
<button
type="button"
role="switch"
aria-checked="false"
class="relative inline-flex h-3 w-6 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-2 w-2 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-3 w-6 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-2 w-2 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="false"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="false"
class="relative inline-flex h-7 w-12 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-6 w-6 translate-x-0 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-7 w-12 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-6 w-6 translate-x-5 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-red-700 transition focus:outline-none focus:ring focus:ring-red-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-emerald-700 transition focus:outline-none focus:ring focus:ring-emerald-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-yellow-700 transition focus:outline-none focus:ring focus:ring-yellow-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-700 transition focus:outline-none focus:ring focus:ring-gray-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>
<button
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-pink-700 transition focus:outline-none focus:ring focus:ring-pink-200">
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"></span>
</button>