<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 font-inter"
            id="widget"
        >
            <!-- Widget -->
            <div class="rounded-xl bg-white p-6 w-96 text-gray-700">
                <div class="font-semibold text-gray-800 mb-4">
                    Crypto Rates
                </div>
                <div class="flex text-sm font-semibold text-gray-600">
                    <div class="w-6/12">Currency</div>
                    <div class="w-3/12">Price</div>
                    <div class="w-3/12">Change</div>
                </div>
                <div class="text-sm flex w-full">
                    <div class="flex items-center space-x-2 mt-5 w-6/12">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="bg-yellow-500 rounded-md w-8 p-1 transform hover:rotate-12 duration-300"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="#ffffff"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            ></path>
                            <path
                                d="M6 6h8a3 3 0 0 1 0 6a3 3 0 0 1 0 6h-8"
                            ></path>
                            <line x1="8" y1="6" x2="8" y2="18"></line>
                            <line x1="8" y1="12" x2="14" y2="12"></line>
                            <line x1="9" y1="3" x2="9" y2="6"></line>
                            <line x1="13" y1="3" x2="13" y2="6"></line>
                            <line x1="9" y1="18" x2="9" y2="21"></line>
                            <line x1="13" y1="18" x2="13" y2="21"></line>
                        </svg>
                        <div>Bitcoin (BTC)</div>
                    </div>
                    <div
                        class="flex items-center space-x-2 mt-5 w-3/12 transform hover:scale-105 duration-200"
                    >
                        $25.214
                    </div>
                    <div
                        class="flex items-center space-x-2 mt-5 w-3/12 flex text-red-500 transform hover:scale-105 duration-200"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="w-5"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            ></path>
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="18" y1="13" x2="12" y2="19"></line>
                            <line x1="6" y1="13" x2="12" y2="19"></line>
                        </svg>
                        <span>3.24%</span>
                    </div>
                </div>
                <div class="text-sm flex w-full">
                    <div class="flex items-center space-x-2 mt-5 w-6/12">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="rounded-md w-8 p-1 bg-green-400 transform hover:rotate-12 duration-300"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="#ffffff"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            ></path>
                            <path d="M6 12l6 -9l6 9l-6 9z"></path>
                            <path d="M6 12l6 -3l6 3l-6 2z"></path>
                        </svg>
                        <div>Ethereum (ETH)</div>
                    </div>
                    <div
                        class="flex items-center space-x-2 mt-5 w-3/12 transform hover:scale-105 duration-200"
                    >
                        $15.487
                    </div>
                    <div
                        class="flex items-center space-x-2 mt-5 w-3/12 flex text-red-500 transform hover:scale-105 duration-200"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="w-5"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            ></path>
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="18" y1="13" x2="12" y2="19"></line>
                            <line x1="6" y1="13" x2="12" y2="19"></line>
                        </svg>
                        <span>2.18%</span>
                    </div>
                </div>
                <div class="text-sm flex w-full">
                    <div class="flex items-center space-x-2 mt-5 w-6/12">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="rounded-md w-8 p-1 bg-pink-900 transform hover:rotate-12 duration-300"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="#ffffff"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            ></path>
                            <path
                                d="M18 19h-8.194a2 2 0 0 1 -1.98 -2.283l1.674 -11.717"
                            ></path>
                            <path d="M14 9l-9 4"></path>
                        </svg>
                        <div>Litecoin (LTC)</div>
                    </div>
                    <div
                        class="flex items-center space-x-2 mt-5 w-3/12 transform hover:scale-105 duration-200"
                    >
                        $2.014
                    </div>
                    <div
                        class="flex items-center space-x-2 mt-5 w-3/12 flex text-green-500 transform hover:scale-105 duration-200"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="w-5"
                            width="28"
                            height="28"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            ></path>
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="18" y1="11" x2="12" y2="5"></line>
                            <line x1="6" y1="11" x2="12" y2="5"></line>
                        </svg>
                        <span>2.68%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>