<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">
            <!-- widget -->
            <div class="rounded-xl bg-white p-8" style="max-width: 450px">
                <div class="flex space-x-6">
                    <div class="flex flex-col items-center">
                        <img
                            src="https://pbs.twimg.com/profile_images/1454861068233228289/6sn9BYOf_400x400.jpg"
                            class="rounded-full w-28 shadow-lg hover:scale-105 transform duration-300 cursor-pointer"
                        />
                        <div class="relative">
                            <span
                                class="text-xs font-semibold text-white bg-purple-500 rounded-md px-2 py-1 shadow-md absolute -left-5 -top-2 hover:scale-110 transform duration-300 cursor-pointer"
                                >DEV</span
                            >
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <div
                            class="flex w-full justify-between items-center mb-4"
                        >
                            <h3 class="text-2xl font-medium text-gray-700">
                                Csaba ツ
                            </h3>
                            <a
                                href=""
                                class="text-gray-400 rounded-full border boder-gray-300 px-5 py-1 text-sm hover:scale-105 transform duration-300 hover:bg-purple-500 hover:text-white"
                                >Follow</a
                            >
                        </div>
                        <p class="text-gray-400 text-sm mb-4">
                            49 years young, father of two, building in
                            public, solopreneur.
                        </p>

                        <div class="border-t bg-gray-200 my-3"></div>
                    </div>
                </div>
                <div class="flex items-center space-x-4 m-1">
                    <div class="flex -space-x-2">
                        <img
                            class="inline-block h-8 w-8 rounded-full ring-2 ring-white hover:scale-110 transform duration-300 cursor-pointer"
                            src="https://pbs.twimg.com/profile_images/1547203581366874113/OW-xVizu_400x400.jpg"
                            alt=""
                        />
                        <img
                            class="inline-block h-8 w-8 rounded-full ring-2 ring-white hover:scale-110 transform duration-300 cursor-pointer"
                            src="https://pbs.twimg.com/profile_images/1308385514744098816/oDXuaci__400x400.jpg"
                            alt=""
                        />
                        <img
                            class="inline-block h-8 w-8 rounded-full ring-2 ring-white hover:scale-110 transform duration-300 cursor-pointer"
                            src="https://pbs.twimg.com/profile_images/1291481749399183360/xqPFhPBS_400x400.jpg"
                            alt=""
                        />
                        <img
                            class="inline-block h-8 w-8 rounded-full ring-2 ring-white hover:scale-110 transform duration-300 cursor-pointer"
                            src="https://pbs.twimg.com/profile_images/1012717264108318722/9lP-d2yM_400x400.jpg"
                            alt=""
                        />
                    </div>
                    <div class="text-blue-400 text-sm font-semibold">
                        Pratham, Marko
                        <span class="text-gray-300">and 5K more</span>
                    </div>
                </div>
            </div>
        </div>
    </div>