<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="relative overflow-hidden rounded-2xl border bg-white p-5 py-3 pt-5"
            id="widget"
        >
            <div class="mb-8 flex items-center justify-between">
                <div>
                    <div class="text-sm text-gray-400">It's amazing!</div>
                    <div class="text-xl font-medium text-gray-700">
                        5 day streak
                    </div>
                </div>
                <div class="text-3xl">🎉</div>
            </div>
            <div class="w-full border-t"></div>
            <div class="relative -mt-3 flex space-x-5 sm:space-x-8">
                <div
                    class="flex h-6 w-6 items-center justify-center rounded-full bg-green-500"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="w-4 text-white"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                </div>
                <div
                    class="flex h-6 w-6 items-center justify-center rounded-full bg-green-500"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="w-4 text-white"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                </div>
                <div
                    class="flex h-6 w-6 items-center justify-center rounded-full bg-green-500"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="w-4 text-white"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                </div>
                <div
                    class="flex h-6 w-6 items-center justify-center rounded-full bg-green-500"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="w-4 text-white"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                </div>
                <div
                    class="flex h-6 w-6 items-center justify-center rounded-full bg-green-500"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="w-4 text-white"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                </div>
                <div
                    class="flex h-6 w-6 items-center justify-center rounded-full border border-green-500 bg-green-100"
                ></div>
                <div
                    class="flex h-6 w-6 items-center justify-center rounded-full border border-green-500 bg-green-100"
                ></div>
            </div>
            <div
                class="mt-6 flex justify-between border-t border-gray-100 p-2"
            >
                <div>
                    <div class="font-semibold text-gray-700">356</div>
                    <div class="text-xs text-gray-400">Tweets posted</div>
                </div>
                <div>
                    <div class="font-semibold text-gray-700">36</div>
                    <div class="text-xs text-gray-400">Comments</div>
                </div>
                <div>
                    <div class="font-semibold text-gray-700">1256</div>
                    <div class="text-xs text-gray-400">Liked posts</div>
                </div>
            </div>
        </div>
    </div>