<div
        class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12"
    >
        <div
            class="sm:max-w-xl sm:mx-auto rounded-2xl sm:rounded-full flex bg-blue-50 border-4 border-blue-200 flex-col sm:flex-row"
            id="widget"
        >
            <div
                class="py-6 sm:rounded-l-full pr-10 relative rounded-xl mx-auto bg-white w-full sm:w-auto"
            >
                <img
                    src="https://pbs.twimg.com/profile_images/1594274868387889154/BGjP25UN_400x400.jpg"
                    class="rounded-full w-full w-32 border-blue-200 border-4 relative left-5 sm:inline-block mx-auto"
                />
                <div
                    class="bg-green-300 w-7 h-7 absolute rounded-full right-6 top-6 border-4 border-white"
                ></div>
            </div>
            <div class="flex flex-col ml-2 p-4">
                <div class="flex justify-between items-center">
                    <h4 class="text-lg font-semibold mb-3">
                        Catalin Pit
                        <span
                            class="font-normal text-sm ml-2 bg-blue-200 py-1 px-2 rounded-md"
                            >@catalinmpit</span
                        >
                    </h4>
                    <div
                        class="mr-10 text-blue-400 rounded-full bg-white py-1 px-2 mb-3"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            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="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
                            ></path>
                        </svg>
                    </div>
                </div>
                <p class="text-sm">
                    Developer Advocate @hashnode, Also interested in Cloud
                    Computing
                </p>
                <div class="mt-2 font-medium text-gray-500">
                    <span class="text-black">672</span> Following
                    <span class="text-black ml-7">59.9K</span> Followers
                </div>
            </div>
        </div>
    </div>