<div
        class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-50 py-6 sm:py-12"
    >
        <div
            class="flex flex-col space-y-5 rounded-xl from-violet-700 p-8 bg-gradient-to-tr to-violet-500"
            id="widget"
        >
            <div class="flex items-center justify-between">
                <div
                    class="flex items-center space-x-1 rounded-lg bg-violet-500 px-2 py-1"
                >
                    <div class="h-5 w-5 rounded-md bg-green-300"></div>
                    <div class="text-white text-sm md:text-base">
                        Programming
                    </div>
                </div>
                <div class="text-violet-300 text-sm md:text-base">
                    24 July 2023
                </div>
            </div>
            <h2 class="text-xl font-medium text-white">
                Landing page - Front-end
            </h2>
            <div class="flex justify-between">
                <img
                    src="https://pbs.twimg.com/profile_images/1454861068233228289/6sn9BYOf_400x400.jpg"
                    class="w-10 rounded-full ring ring-white"
                />
                <div class="flex space-x-2 md:space-x-4 items-center">
                    <div class="flex space-x-2 text-violet-300">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="1.5"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
                            ></path>
                        </svg>
                        <div>2</div>
                    </div>
                    <div class="flex space-x-2 text-violet-300">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="1.5"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                            ></path>
                        </svg>
                        <div>2</div>
                    </div>
                    <div class="flex space-x-2 text-white items-center">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-8 w-8"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="1.5"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"
                            ></path>
                        </svg>
                        <div>00:34</div>
                    </div>
                </div>
            </div>
            <div class="flex justify-between items-center space-x-9">
                <div class="h-3 rounded-full bg-violet-500 md:w-80 flex-1">
                    <div
                        class="w-[80%] h-3 rounded-full from-green-300 to-green-400 bg-gradient-to-l"
                    ></div>
                </div>
                <div class="text-violet-300 w-24">Est: 2:00 h</div>
            </div>
        </div>
    </div>