<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 w-96 rounded-2xl"
            id="widget"
        >
            <img
                src="https://images.unsplash.com/photo-1608788524926-41b5181b89a2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=3150&amp;q=80"
                class="rounded-2xl"
            />
            <div
                class="text-sm font-bold text-gray-50 absolute top-6 right-3 glassmorphism-25 p-1 rounded-full px-3"
            >
                James Bond Island
            </div>
            <div
                class="absolute bottom-0 left-0 right-0 glassmorphism-25 h-16 flex p-3 px-5 space-y-2 rounded-b-3xl opacity-95 flex justify-between items-center"
            >
                <div
                    class="flex space-x-3 text-white font-medium items-center"
                >
                    <img
                        src="https://images.unsplash.com/profile-1580909319031-f23261ca6127image?dpr=2&amp;auto=format&amp;fit=crop&amp;w=20&amp;h=20&amp;q=60&amp;crop=faces&amp;bg=fff"
                        class="transform scale-100 hover:scale-105 rounded-full ring-2 ring-offset-white ring-white"
                    />
                    <div>
                        <div>Engin Akyurt</div>
                        <div class="text-sm flex items-center">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="mr-1 -ml-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>
                                <circle cx="12" cy="11" r="3"></circle>
                                <path
                                    d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"
                                ></path>
                            </svg>
                            Thailand
                        </div>
                    </div>
                </div>
                <div class="flex items-center text-gray-50 space-x-2">
                    <button class="cursor-pointer">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="transform scale-100 hover:scale-110"
                            width="32"
                            height="32"
                            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="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>
                    </button>
                    <button class="cursor-pointer">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="transform scale-100 hover:scale-110"
                            width="32"
                            height="32"
                            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="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>
                    </button>
                </div>
            </div>
        </div>
    </div>