Light / Dark Toggle Challenge

toggle.blade.php

<label for="toggle" class="relative p-4 rounded-[6rem] w-56 overflow-hidden shadow-[inset_0_0px_8px_4px_rgb(0_0_0_/0.3)]">
    <input id="toggle" checked type="checkbox" class="hidden peer">

    {{-- Ambient --}}
    <div class="transition duration-300 ease-in-out absolute -z-30 w-72 h-72 -translate-y-1/2 top-1/2 translate-x-0 peer-checked:-translate-x-8 bg-[#6182b8] rounded-full peer-checked:bg-[rgb(46,58,76)]"></div>
    <div class="transition duration-300 ease-in-out absolute -z-30 w-64 h-64 -translate-y-1/2 top-1/2 translate-x-[-6.25rem] peer-checked:translate-x-[2rem] bg-[#7a93c5] rounded-full peer-checked:bg-[#4a5364]"></div>
    <div class="transition duration-300 ease-in-out absolute -z-30 w-64 h-64 -translate-y-1/2 top-1/2 translate-x-[-8.5rem] peer-checked:translate-x-[4.5rem] bg-[#8ca5cd] rounded-full peer-checked:bg-[#666d7b]"></div>

    {{-- Clouds --}}
    <div class="transition duration-300 ease-in-out relative top-24 -right-4 transform -z-20 peer-checked:translate-x-full">
        <div class="absolute bottom-10 -right-6 -z-10 bg-[#bac7e1] w-12 h-12 rounded-full"></div>
        <div class="absolute bottom-7 right-0 -z-10 bg-[#bac7e1] w-12 h-12 rounded-full"></div>
        <div class="absolute bottom-2 right-6 -z-10 bg-[#bac7e1] w-12 h-12 rounded-full"></div>
        <div class="absolute -bottom-2 right-12 -z-10 bg-[#bac7e1] w-16 h-16 rounded-full"></div>
        <div class="absolute -bottom-2 right-20 -z-10 bg-[#bac7e1] w-16 h-16 rounded-full"></div>

        <div class="absolute bottom-4 -right-5 -z-10 bg-white w-12 h-12 rounded-full"></div>
        <div class="absolute bottom-1 -right-1 -z-10 bg-white w-12 h-12 rounded-full"></div>
        <div class="absolute -bottom-3 right-4 -z-10 bg-white w-12 h-12 rounded-full"></div>
        <div class="absolute -bottom-7 right-12 -z-10 bg-white w-12 h-12 rounded-full"></div>
        <div class="absolute -bottom-5 right-20 -z-10 bg-white w-12 h-12 rounded-full"></div>
        <div class="absolute -bottom-6 right-28 -z-10 bg-white w-12 h-12 rounded-full"></div>
        <div class="absolute -bottom-7 right-36 -z-10 bg-white w-16 h-16 rounded-full"></div>
    </div>

    {{-- Stars --}}
    <div class="transition duration-300 ease-in-out relative transform -z-20 -translate-x-full peer-checked:translate-x-0">
        {{-- Darker Area --}}
        <svg class="text-white absolute top-4 w-2 h-2 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>
        <svg class="text-white absolute top-12 -left-1 w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>
        <svg class="text-white absolute top-16 left-3 w-2 h-2 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>

        {{-- Slightly Darker Area --}}
        <svg class="text-white/50 absolute top-12 left-9 w-1 h-1 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>
        <svg class="text-white/50 absolute top-0 left-16 w-1 h-1 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>
        <svg class="text-white/50 absolute top-[4.5rem] left-[4.5rem] w-1 h-1 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>
        <svg class="text-white absolute top-7 left-[3.5rem] w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>

        {{-- Lighter Area --}}
        <svg class="text-white/50 absolute top-2 left-20 w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>
        <svg class="text-white absolute top-0 left-24 w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>
        <svg class="text-white absolute top-[4.25rem] left-[5rem] w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg>
    </div>

    <div class="transition duration-300 ease-in-out transform relative w-20 h-20 peer-checked:translate-x-[140%] group">
        {{-- Sun / Moon --}}
        <div class="transition duration-300 ease-in-out absolute -top-0.5 -left-0.5 w-full h-full bg-yellow-100 rounded-full shadow shadow-yellow-100 rotate-[135deg] peer-checked:group-[]:bg-[#c7c7c9] peer-checked:group-[]:shadow-[#c7c7c9]"></div>
        <div class="transition duration-300 ease-in-out absolute top-0.5 left-0.5 w-full h-full bg-yellow-400 rounded-full shadow shadow-yellow-600 -rotate-45 peer-checked:group-[]:bg-[#a6a6a8] peer-checked:group-[]:shadow-[#a6a6a8]"></div>
        <div class="transition duration-300 ease-in-out absolute w-full h-full bg-yellow-300 rounded-full peer-checked:group-[]:bg-[#b3b3b3]"></div>

        {{-- Moon Craters --}}
        <div class="transition duration-300 ease-in-out absolute top-4 left-2 w-8 h-8 bg-yellow-300 rounded-full peer-checked:group-[]:bg-[#a4a4a4]"></div>
        <div class="transition duration-300 ease-in-out absolute top-5 left-12 w-6 h-6 bg-yellow-300 rounded-full peer-checked:group-[]:bg-[#a4a4a4]"></div>
        <div class="transition duration-300 ease-in-out absolute top-[3.25rem] left-7 w-6 h-6 bg-yellow-300 rounded-full peer-checked:group-[]:bg-[#a4a4a4]"></div>
    </div>
</label>

Idk bruh, this thing took me 1 hours.