<div
        class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12"
    >
        <div class="relative py-3 sm:max-w-xl sm:mx-auto" id="widget">
            <div
                class="bg-royalblue-900 rounded-xl p-6 flex flex-col space-y-5 shadow-xl"
            >
                <div class="flex justify-between text-white w-full">
                    <div class="w-32 font-medium">
                        Popular picking times
                    </div>
                    <div
                        class="font-medium flex flex-col bg-denim-900 p-4 rounded-lg justify-start"
                    >
                        <div class="text-center text-2xll">18:33</div>
                        <div class="text-xxs font-light">Usually busy</div>
                    </div>
                </div>
                <div class="flex flex-1 space-x-3 text-xxs">
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-5 rounded-full"
                        ></div>
                        <div class="text-white">12:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-8 rounded-full"
                        ></div>
                        <div class="text-white">13:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-12 rounded-full"
                        ></div>
                        <div class="text-white">14:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-16 rounded-full"
                        ></div>
                        <div class="text-white">15:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-20 rounded-full"
                        ></div>
                        <div class="text-white">16:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-cerise-400 cursor-pointer hover:bg-gradient-to-b hover:from-cerise-400 hover:to-cerise-200 h-32 rounded-full"
                        ></div>
                        <div class="text-white">17:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-16 rounded-full"
                        ></div>
                        <div class="text-white">18:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-12 rounded-full"
                        ></div>
                        <div class="text-white">19:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-10 rounded-full"
                        ></div>
                        <div class="text-white">20:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-4 rounded-full"
                        ></div>
                        <div class="text-white">21:00</div>
                    </div>
                    <div
                        class="flex flex-col items-center space-y-2 justify-end"
                    >
                        <div
                            class="w-3 bg-royalblue-300 cursor-pointer hover:bg-gradient-to-b hover:from-royalblue-300 hover:to-royalblue-100 h-2 rounded-full"
                        ></div>
                        <div class="text-white">22:00</div>
                    </div>
                </div>
            </div>
        </div>
    </div>