tailwind toggle with pseudoelements

toggle.html

		<span class="tw-flex tw-items-center tw-cursor-pointer">
			<label for="autoplay" class="tw-text-xs tw-font-medium tw-text-zinc-400 dark:tw-text-zinc-500 tw-mr-2">Autoplay</label>
			<input type="checkbox" id="autoplay" class="tw-bg-zinc-200 tw-relative tw-inline-flex tw-h-6 tw-w-11 tw-flex-shrink-0 tw-cursor-pointer tw-rounded-full tw-border-2 tw-border-transparent tw-transition-colors tw-duration-200 tw-ease-in-out focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-600 focus:tw-ring-offset-2 before:tw-content-[''] before:tw-translate-x-0 before:tw-pointer-events-none before:tw-inline-block before:tw-h-5 before:tw-w-5 before:tw-transform before:tw-rounded-full before:tw-bg-white before:tw-shadow before:tw-ring-0 before:tw-transition before:tw-duration-200 before:tw-ease-in-out before:tw-relative before:tw-z-10 checked:before:tw-translate-x-5 checked:tw-bg-zinc-200 checked:tw-text-zinc-200 checked:focus:tw-text-primary-600 checked:after:tw-block checked:after:tw-content-[''] checked:after:tw-bg-zinc-200 checked:after:tw-w-10 after:tw-absolute checked:after:tw-h-5 checked:after:tw-rounded checked:after:focus:tw-bg-primary-600" role="switch" aria-checked="false">
		</input>
		</span>