tailwind-alpine-switch

<div x-data="{ isChecked: false }" class="w-full">
    <label for="myCheckbox" class="mt-3 inline-flex items-center cursor-pointer">
        <span class="relative">
            <span class="block w-10 h-6 bg-white rounded-full border border-gray-300"></span>
            <span class="absolute block w-4 h-4 mt-1 ml-1 bg-gray-400 rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition-transform duration-300 ease-in-out outline-none" :class="{'bg-purple-600 transform translate-x-full':isChecked}">
                <input @click="isChecked = !isChecked" id="myCheckbox" type="checkbox" class="absolute opacity-0 w-0 h-0">
            </span>
        </span>
        <span class="ml-3 text-sm" x-html="isChecked"></span>
    </label>
</div>

Preview: https://codepen.io/alaminfirdows/pen/xxRjpoP