<div
        class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-50 py-6 sm:py-12"
    >
        <div
            class="flex justify-between space-x-1 rounded-3xl bg-slate-800 p-8"
            id="widget"
        >
            <div
                class="flex w-16 sm:w-20 justify-center rounded-3xl duration-200 hover:ring hover:ring-slate-500 py-2"
            >
                <div
                    class="tranform flex flex-col items-center justify-center space-y-2"
                >
                    <div class="font-medium text-rose-500">SUN</div>
                    <div class="text-xl font-medium text-white">23</div>
                </div>
            </div>
            <div
                class="flex w-16 sm:w-20 justify-center rounded-3xl duration-200 hover:ring hover:ring-slate-500 py-2 cursor-pointer"
            >
                <div
                    class="tranform flex flex-col items-center justify-center space-y-2"
                >
                    <div class="font-medium text-white">MON</div>
                    <div class="text-xl font-medium text-white">24</div>
                </div>
            </div>
            <div
                class="flex w-16 sm:w-20 justify-center rounded-3xl duration-200 hover:ring hover:ring-slate-500 py-2 cursor-pointer"
            >
                <div
                    class="tranform flex flex-col items-center justify-center space-y-2"
                >
                    <div class="font-medium text-white">TUE</div>
                    <div class="text-xl font-medium text-white">25</div>
                </div>
            </div>
            <div
                class="flex w-16 sm:w-20 justify-center rounded-3xl duration-200 hover:ring hover:ring-slate-500 bg-slate-700 py-2 cursor-pointer"
            >
                <div
                    class="tranform flex flex-col items-center justify-center space-y-2 rounded-3xl rounded-3xl"
                >
                    <div class="font-medium text-white">WED</div>
                    <div class="text-xl font-medium text-white">26</div>
                </div>
            </div>
            <div
                class="flex w-16 sm:w-20 justify-center rounded-3xl duration-200 hover:ring hover:ring-slate-500 py-2 cursor-pointer"
            >
                <div
                    class="tranform flex flex-col items-center justify-center space-y-2 rounded-3xl duration-200"
                >
                    <div class="font-medium text-white">THU</div>
                    <div class="text-xl font-medium text-white">27</div>
                </div>
            </div>
            <div
                class="flex w-16 sm:w-20 justify-center rounded-3xl duration-200 hover:ring hover:ring-slate-500 py-2 cursor-pointer"
            >
                <div
                    class="tranform flex w-[14.28%] flex-col items-center justify-center space-y-2"
                >
                    <div class="font-medium text-white">FRI</div>
                    <div class="text-xl font-medium text-white">28</div>
                </div>
            </div>
            <div
                class="flex w-16 sm:w-20 justify-center rounded-3xl duration-200 hover:ring hover:ring-slate-500 py-2 cursor-pointer cursor-pointer"
            >
                <div
                    class="tranform flex flex-col items-center justify-center space-y-2"
                >
                    <div class="font-medium text-rose-500">SAT</div>
                    <div class="text-xl font-medium text-white">29</div>
                </div>
            </div>
        </div>
    </div>