tailwind-ai/application_ui/lists/feeds/simple_with_icons.html

<div class="flow-root">
    <ul role="list" class="-mb-8">
        <li>
            <div class="relative pb-8">
                <span
                    aria-hidden="true"
                    class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
                ></span>
                <div class="relative flex space-x-3">
                    <div>
                        <span
                            class="flex size-8 items-center justify-center rounded-full bg-gray-400 ring-8 ring-white"
                        >
                            <svg
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                data-slot="icon"
                                aria-hidden="true"
                                class="size-5 text-white"
                            >
                                <path
                                    d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z"
                                />
                            </svg>
                        </span>
                    </div>
                    <div
                        class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5"
                    >
                        <div>
                            <p class="text-sm text-gray-500">
                                Applied to
                                <a href="#" class="font-medium text-gray-900"
                                    >Front End Developer</a
                                >
                            </p>
                        </div>
                        <div
                            class="text-right text-sm whitespace-nowrap text-gray-500"
                        >
                            <time datetime="2020-09-20">Sep 20</time>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="relative pb-8">
                <span
                    aria-hidden="true"
                    class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
                ></span>
                <div class="relative flex space-x-3">
                    <div>
                        <span
                            class="flex size-8 items-center justify-center rounded-full bg-blue-500 ring-8 ring-white"
                        >
                            <svg
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                data-slot="icon"
                                aria-hidden="true"
                                class="size-5 text-white"
                            >
                                <path
                                    d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0 1 14 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 0 1-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 0 1-1.341-.317l-2.734-1.366A3 3 0 0 0 6.292 15H5V8h.963c.685 0 1.258-.483 1.612-1.068a4.011 4.011 0 0 1 2.166-1.73c.432-.143.853-.386 1.011-.814.16-.432.248-.9.248-1.388Z"
                                />
                            </svg>
                        </span>
                    </div>
                    <div
                        class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5"
                    >
                        <div>
                            <p class="text-sm text-gray-500">
                                Advanced to phone screening by
                                <a href="#" class="font-medium text-gray-900"
                                    >Bethany Blake</a
                                >
                            </p>
                        </div>
                        <div
                            class="text-right text-sm whitespace-nowrap text-gray-500"
                        >
                            <time datetime="2020-09-22">Sep 22</time>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="relative pb-8">
                <span
                    aria-hidden="true"
                    class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
                ></span>
                <div class="relative flex space-x-3">
                    <div>
                        <span
                            class="flex size-8 items-center justify-center rounded-full bg-green-500 ring-8 ring-white"
                        >
                            <svg
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                data-slot="icon"
                                aria-hidden="true"
                                class="size-5 text-white"
                            >
                                <path
                                    d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                                    clip-rule="evenodd"
                                    fill-rule="evenodd"
                                />
                            </svg>
                        </span>
                    </div>
                    <div
                        class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5"
                    >
                        <div>
                            <p class="text-sm text-gray-500">
                                Completed phone screening with
                                <a href="#" class="font-medium text-gray-900"
                                    >Martha Gardner</a
                                >
                            </p>
                        </div>
                        <div
                            class="text-right text-sm whitespace-nowrap text-gray-500"
                        >
                            <time datetime="2020-09-28">Sep 28</time>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="relative pb-8">
                <span
                    aria-hidden="true"
                    class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
                ></span>
                <div class="relative flex space-x-3">
                    <div>
                        <span
                            class="flex size-8 items-center justify-center rounded-full bg-blue-500 ring-8 ring-white"
                        >
                            <svg
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                data-slot="icon"
                                aria-hidden="true"
                                class="size-5 text-white"
                            >
                                <path
                                    d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0 1 14 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 0 1-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 0 1-1.341-.317l-2.734-1.366A3 3 0 0 0 6.292 15H5V8h.963c.685 0 1.258-.483 1.612-1.068a4.011 4.011 0 0 1 2.166-1.73c.432-.143.853-.386 1.011-.814.16-.432.248-.9.248-1.388Z"
                                />
                            </svg>
                        </span>
                    </div>
                    <div
                        class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5"
                    >
                        <div>
                            <p class="text-sm text-gray-500">
                                Advanced to interview by
                                <a href="#" class="font-medium text-gray-900"
                                    >Bethany Blake</a
                                >
                            </p>
                        </div>
                        <div
                            class="text-right text-sm whitespace-nowrap text-gray-500"
                        >
                            <time datetime="2020-09-30">Sep 30</time>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="relative pb-8">
                <div class="relative flex space-x-3">
                    <div>
                        <span
                            class="flex size-8 items-center justify-center rounded-full bg-green-500 ring-8 ring-white"
                        >
                            <svg
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                data-slot="icon"
                                aria-hidden="true"
                                class="size-5 text-white"
                            >
                                <path
                                    d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                                    clip-rule="evenodd"
                                    fill-rule="evenodd"
                                />
                            </svg>
                        </span>
                    </div>
                    <div
                        class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5"
                    >
                        <div>
                            <p class="text-sm text-gray-500">
                                Completed interview with
                                <a href="#" class="font-medium text-gray-900"
                                    >Katherine Snyder</a
                                >
                            </p>
                        </div>
                        <div
                            class="text-right text-sm whitespace-nowrap text-gray-500"
                        >
                            <time datetime="2020-10-04">Oct 4</time>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>