<div class="min-h-screen bg-gray-50 p-10">
        <div
            class="rounded-lg shadow-md p-4 w-96 mx-auto mt-10 bg-white"
            id="widget"
            >
            <div class="flex">
                <img
                    src="https://randomuser.me/api/portraits/women/44.jpg"
                    class="rounded-full h-20 p-1 shadow-md"
                />
                <div class="p-2 pl-6">
                    <h2 class="text-xl">Giorgia Girolamo</h2>
                    <span class="text-sm text-gray-400">Milan, Italy</span>
                    <div class="flex text-yellow-300 my-2">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="text-yellow-300 mx-1"
                            width="16"
                            height="16"
                            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>
                            <path
                                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                            ></path>
                        </svg>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="text-yellow-300 mx-1"
                            width="16"
                            height="16"
                            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>
                            <path
                                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                            ></path>
                        </svg>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="text-yellow-300 mx-1"
                            width="16"
                            height="16"
                            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>
                            <path
                                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                            ></path>
                        </svg>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="text-yellow-300 mx-1"
                            width="16"
                            height="16"
                            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>
                            <path
                                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                            ></path>
                        </svg>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="text-yellow-300 mx-1"
                            width="16"
                            height="16"
                            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>
                            <path
                                d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
                            ></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="my-5">
                <div class="flex justify-between my-2">
                    <div class="text-sm">Dribbble Followers</div>
                    <div class="text-sm text-green-400">65.356</div>
                </div>
                <div class="bg-green-200 w-full h-2 rounded-full">
                    <div class="bg-green-500 w-48 h-2 rounded-full"></div>
                </div>
            </div>
            <div class="my-5">
                <div class="flex justify-between my-2">
                    <div class="text-sm">Behance Followers</div>
                    <div class="text-sm text-green-400">35.356</div>
                </div>
                <div class="bg-green-200 w-full h-2 rounded-full">
                    <div class="bg-green-500 w-20 h-2 rounded-full"></div>
                </div>
            </div>
            <div class="my-5">
                <div class="flex justify-between my-2">
                    <div class="text-sm">Twitter Followers</div>
                    <div class="text-sm text-green-400">95.356</div>
                </div>
                <div class="bg-green-200 w-full h-2 rounded-full">
                    <div class="bg-green-500 w-5/6 h-2 rounded-full"></div>
                </div>
            </div>
        </div>
    </div>