<!-- switch -->
<div class="flex ioajsklehsnm gap-2">
<label>Switch</label>
<label class="relative w-12 h-[26px]">
<input id="switch5" type="checkbox" class="switch-checkbox relative inline-block w-12 h-[26px] transition-all duration-200 ease-in-out cursor-pointer appearance-none boalstehwqbj border border-black/20 dark:border-white/30">
<div class="toggle-default absolute top-[3px] start-1 w-5 h-5 transition-all duration-200 ease-in-out transform bg-neutral-900 boalstehwqbj shadow-md"></div>
</label>
</div>
<!-- switch alpine -->
<div x-data="{ on: false }" class="flex layhetgsjdcb gap-3">
<!-- Text ON -->
<span :class="on ? 'text-purple-500 dark:text-purple-200' : 'text-neutral-400'" class="font-medium">Monthly</span>
<!-- Switch -->
<label class="relative w-12 h-[26px]">
<input type="checkbox" @click="on = !on" class="switch-checkbox relative inline-block w-12 h-[26px] transition-all duration-200 ease-in-out cursor-pointer appearance-none boalstehwqbj border border-black/20 dark:border-white/30">
<div :class="on ? 'translate-x-6' : ''" class="toggle-default absolute top-[3px] start-1 w-5 h-5 transition-all duration-200 ease-in-out transform bg-neutral-900 boalstehwqbj shadow-md"></div>
</label>
<!-- Text OFF -->
<span :class="!on ? 'text-purple-500 dark:text-purple-200' : 'text-neutral-400'" class="font-medium">Yearly</span>
</div>
