<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">
            <!-- widget -->
            <div
                class="rounded-2xl flex bg-white p-6 flex-col space-y-5"
                id="widget"
            >
                <div class="flex justify-between w-64">
                    <img
                        src="https://images.generated.photos/DGpjFgKPqi0esyBfXUYQavuDlZnR4mHme3fBaJdZy5o/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/MDcwMzExXzA4MDQ1/NTJfMDI4MDY0Ny5q/cGc.jpg"
                        class="rounded-full ring-4 ring-white h-20 w-20 shadow-2xl"
                    />
                    <button
                        class="hover:border-gray-200 border border-white flex-grow-0 rounded-full h-12 w-12 flex items-center justify-center transform duration-500"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="#000000"
                            fill="none"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            ></path>
                            <circle cx="5" cy="12" r="1"></circle>
                            <circle cx="12" cy="12" r="1"></circle>
                            <circle cx="19" cy="12" r="1"></circle>
                        </svg>
                    </button>
                </div>
                <div>
                    <p class="text-lg font-semibold">John Doe</p>
                    <p class="text-gray-400 text-xs">USA</p>
                </div>
                <div class="flex space-x-10 text-gray-400">
                    <div>
                        <p class="text-red-400 font-bold">10.9K</p>
                        <p class="text-xs">Followers</p>
                    </div>
                    <div>
                        <p class="text-green-500 font-bold">468</p>
                        <p class="text-xs">Following</p>
                    </div>
                    <div>
                        <p class="text-blue-400 font-bold">15.1K</p>
                        <p class="text-xs">Tweets</p>
                    </div>
                </div>
                <div class="flex space-x-5 items-center">
                    <button
                        class="rounded-lg bg-red-400 text-red-50 text-sm p-2 px-6 transform hover:scale-105 duration-300"
                    >
                        Follow
                    </button>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="transform hover:scale-110 cursor-pointer duration-300"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="#000000"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <path
                            stroke="none"
                            d="M0 0h24v24H0z"
                            fill="none"
                        ></path>
                        <path
                            d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"
                        ></path>
                        <line x1="12" y1="12" x2="12" y2="12.01"></line>
                        <line x1="8" y1="12" x2="8" y2="12.01"></line>
                        <line x1="16" y1="12" x2="16" y2="12.01"></line>
                    </svg>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="transform hover:scale-110 cursor-pointer duration-300"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="#000000"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <path
                            stroke="none"
                            d="M0 0h24v24H0z"
                            fill="none"
                        ></path>
                        <path
                            d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
                        ></path>
                    </svg>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="transform hover:scale-110 cursor-pointer duration-300"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="#000000"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <path
                            stroke="none"
                            d="M0 0h24v24H0z"
                            fill="none"
                        ></path>
                        <path
                            d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"
                        ></path>
                        <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>