Pure Tailwind Day/Night Toggle

<label>
    <div class="group">
      <input type="checkbox" class="hidden">

      <div class="aspect-[9/5] relative w-20 rounded-full border-sky-200 border bg-sky-300 overflow-hidden cursor-pointer transition-colors duration-1000 group-has-[:checked]:border-sky-900 group-has-[:checked]:bg-sky-950">
        <div class="absolute transition-all duration-500 -left-2 -top-1/2 w-full aspect-square bg-sky-50 bg-opacity-30 rounded-full group-has-[:checked]:left-2 group-has-[:checked]:bg-opacity-10"></div>
        <div class="absolute transition-all duration-500 -left-5 -top-1/2 w-full aspect-square bg-sky-50 bg-opacity-30 rounded-full group-has-[:checked]:left-5 group-has-[:checked]:bg-opacity-10"></div>
        <div class="absolute transition-all duration-500 -left-8 -top-1/2 w-full aspect-square bg-sky-50 bg-opacity-30 rounded-full group-has-[:checked]:left-8 group-has-[:checked]:bg-opacity-10"></div>

        <div class="absolute bg-sky-100 right-4 -bottom-8 h-11 aspect-square rounded-full transition-transform group-has-[:checked]:translate-y-full"></div>
        <div class="absolute bg-sky-100 right-2 -bottom-2 h-7 aspect-square rounded-full transition-transform group-has-[:checked]:translate-y-full"></div>
        <div class="absolute bg-blue-100 -right-6 -bottom-4 h-11 aspect-square rounded-full transition-transform group-has-[:checked]:translate-y-full"></div>

        <div class="absolute bg-blue-100 right-4 -bottom-8 h-10 aspect-square rounded-full transition-transform group-has-[:checked]:translate-y-full"></div>
        <div class="absolute bg-blue-100 right-2 -bottom-2 h-6 aspect-square rounded-full transition-transform group-has-[:checked]:translate-y-full"></div>
        <div class="absolute bg-sky-100 -right-6 -bottom-4 h-10 aspect-square rounded-full transition-transform group-has-[:checked]:translate-y-full"></div>

        <div class="absolute bg-sky-50 right-4 -bottom-8 h-9 aspect-square rounded-full transition-transform group-has-[:checked]:translate-y-full"></div>
        <div class="absolute bg-sky-50 right-2 -bottom-2 h-5 aspect-square rounded-full transition-transform group-has-[:checked]:translate-y-full"></div>
        <div class="absolute bg-sky-20 -right-6 -bottom-4 h-9 aspect-square rounded-full transition-transform group-has-[:checked]:translate-y-full"></div>




        <div class="transition-all text-[0px] group-has-[:checked]:text-[10px]">
          <div class="absolute left-2 top-1 text-white">✷</div>
          <div class="absolute left-1 bottom-1 text-white">✴</div>
          <div class="absolute left-6 top-3 text-white">✶</div>
          <div class="absolute right-0 bottom-1 text-white">✸</div>
          <div class="absolute right-4 top-0 text-white">✷</div>
          <div class="absolute right-8 bottom-0 text-white">✴</div>
        </div>

        <div class="bg-yellow-300 absolute inset-y-2 left-2 rounded-full aspect-square shadow-[-2px_-2px_5px_#fef08a,2px_2px_5px_#eab308] bg-gradient-to-br from-yellow-100 to-yellow-500 transition-all duration-300 group-has-[:checked]:rotate-90 group-has-[:checked]:translate-full group-has-[:checked]:-translate-y-[200%]"></div>
        <div class="bg-stone-300 absolute inset-y-2 right-2 rounded-full aspect-square shadow-[inset_-2px_-2px_5px_#78716c,inset_2px_2px_5px_#57534e] overflow-hidden transition-all duration-300 -translate-x-full -translate-y-[200%] -rotate-90 group-has-[:checked]:translate-x-0 group-has-[:checked]:translate-y-0 group-has-[:checked]:rotate-0">
          <div class="relative h-full rounded-full border-2 border-transparent overflow-hidden">
            <div class="left-[10%] top-[10%] absolute aspect-square w-1/2 rounded-full bg-gradient-to-br to-stone-500/30 from-stone-800/30 shadow-[5px_5px_10px_#57534e70,-5px_-5px_10px_#e7e5e5]"></div>

            <div class="right-[10%] top-[20%] absolute aspect-square w-1/4 rounded-full bg-gradient-to-br to-stone-500/30 from-stone-800/30 shadow-[5px_5px_10px_#57534e70,-5px_-5px_10px_#e7e5e5]"></div>

            <div class="right-[20%] bottom-[20%] absolute aspect-square w-1/5 rounded-full bg-gradient-to-br to-stone-500/30 from-stone-800/30 shadow-[5px_5px_10px_#57534e70,-5px_-5px_10px_#e7e5e5]"></div>
          </div>
        </div>

      </div>
    </div>
</label>