<div class="flex justify-center p-6">
<label
class="block h-8 w-14 cursor-pointer rounded-full border border-gray-300 bg-white p-[3px] has-[:focus-visible]:border-gray-500 has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-gray-500"
>
<input type="checkbox" class="peer sr-only" />
<div class="size-6 rounded-full bg-gray-300 transition peer-checked:translate-x-6 peer-checked:bg-green-500"></div>
</label>
</div>
<div class="flex justify-center p-6">
<div class="flex items-center space-x-3">
<label
class="block h-8 w-14 cursor-pointer rounded-full border border-gray-300 bg-white p-[3px] has-[:focus-visible]:border-gray-500 has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-gray-500"
>
<input type="checkbox" class="peer sr-only" />
<div class="size-6 rounded-full bg-gray-300 transition peer-checked:translate-x-6 peer-checked:bg-green-500"></div>
</label>
<span class="text-sm text-gray-900">Activate</span>
</div>
</div>
<div class="flex justify-center p-6">
<label
class="block h-8 w-14 cursor-pointer overflow-hidden rounded-full border border-transparent bg-gray-300 p-[3px] transition-[background-color] has-[:focus-visible]:border-gray-500 has-[:checked]:bg-green-500 has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-gray-500"
>
<input type="checkbox" class="peer sr-only" />
<div class="size-6 rounded-full bg-white transition peer-checked:translate-x-6"></div>
</label>
</div>
<div class="flex justify-center p-6">
<label class="block h-5 w-12 cursor-pointer rounded-full bg-gray-200">
<input type="checkbox" class="peer sr-only" />
<div
class="size-7 -translate-x-3 -translate-y-1 rounded-full bg-gray-500 transition peer-checked:translate-x-8 peer-checked:bg-green-500 peer-focus-visible:ring-2 peer-focus-visible:ring-gray-500 peer-focus-visible:ring-offset-2"
></div>
</label>
</div>
<div class="flex justify-center p-6">
<label
class="block h-8 w-14 cursor-pointer rounded border border-transparent bg-gray-300 p-[3px] transition-[background-color] has-[:focus-visible]:border-gray-500 has-[:checked]:bg-green-500 has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-gray-500"
>
<input type="checkbox" class="peer sr-only" />
<div class="size-6 rounded-sm bg-white transition peer-checked:translate-x-6"></div>
</label>
</div>