tailwind-ai/application_ui/lists/stacked_lists/with_links.html

<ul role="list" class="divide-y divide-gray-100">
    <li class="relative flex justify-between gap-x-6 py-5">
        <div class="flex min-w-0 gap-x-4">
            <img
                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
                class="size-12 flex-none rounded-full bg-gray-50"
            />
            <div class="min-w-0 flex-auto">
                <p class="text-sm/6 font-semibold text-gray-900">
                    <a href="#">
                        <span
                            class="absolute inset-x-0 -top-px bottom-0"
                        ></span>
                        Leslie Alexander
                    </a>
                </p>
                <p class="mt-1 flex text-xs/5 text-gray-500">
                    <a
                        href="mailto:leslie.alexander@example.com"
                        class="relative truncate hover:underline"
                        >leslie.alexander@example.com</a
                    >
                </p>
            </div>
        </div>
        <div class="flex shrink-0 items-center gap-x-4">
            <div class="hidden sm:flex sm:flex-col sm:items-end">
                <p class="text-sm/6 text-gray-900">Co-Founder / CEO</p>
                <p class="mt-1 text-xs/5 text-gray-500">
                    Last seen <time datetime="2023-01-23T13:23Z">3h ago</time>
                </p>
            </div>
            <svg
                viewBox="0 0 20 20"
                fill="currentColor"
                data-slot="icon"
                aria-hidden="true"
                class="size-5 flex-none text-gray-400"
            >
                <path
                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                />
            </svg>
        </div>
    </li>
    <li class="relative flex justify-between gap-x-6 py-5">
        <div class="flex min-w-0 gap-x-4">
            <img
                src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
                class="size-12 flex-none rounded-full bg-gray-50"
            />
            <div class="min-w-0 flex-auto">
                <p class="text-sm/6 font-semibold text-gray-900">
                    <a href="#">
                        <span
                            class="absolute inset-x-0 -top-px bottom-0"
                        ></span>
                        Michael Foster
                    </a>
                </p>
                <p class="mt-1 flex text-xs/5 text-gray-500">
                    <a
                        href="mailto:michael.foster@example.com"
                        class="relative truncate hover:underline"
                        >michael.foster@example.com</a
                    >
                </p>
            </div>
        </div>
        <div class="flex shrink-0 items-center gap-x-4">
            <div class="hidden sm:flex sm:flex-col sm:items-end">
                <p class="text-sm/6 text-gray-900">Co-Founder / CTO</p>
                <p class="mt-1 text-xs/5 text-gray-500">
                    Last seen <time datetime="2023-01-23T13:23Z">3h ago</time>
                </p>
            </div>
            <svg
                viewBox="0 0 20 20"
                fill="currentColor"
                data-slot="icon"
                aria-hidden="true"
                class="size-5 flex-none text-gray-400"
            >
                <path
                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                />
            </svg>
        </div>
    </li>
    <li class="relative flex justify-between gap-x-6 py-5">
        <div class="flex min-w-0 gap-x-4">
            <img
                src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
                class="size-12 flex-none rounded-full bg-gray-50"
            />
            <div class="min-w-0 flex-auto">
                <p class="text-sm/6 font-semibold text-gray-900">
                    <a href="#">
                        <span
                            class="absolute inset-x-0 -top-px bottom-0"
                        ></span>
                        Dries Vincent
                    </a>
                </p>
                <p class="mt-1 flex text-xs/5 text-gray-500">
                    <a
                        href="mailto:dries.vincent@example.com"
                        class="relative truncate hover:underline"
                        >dries.vincent@example.com</a
                    >
                </p>
            </div>
        </div>
        <div class="flex shrink-0 items-center gap-x-4">
            <div class="hidden sm:flex sm:flex-col sm:items-end">
                <p class="text-sm/6 text-gray-900">Business Relations</p>
                <div class="mt-1 flex items-center gap-x-1.5">
                    <div class="flex-none rounded-full bg-emerald-500/20 p-1">
                        <div class="size-1.5 rounded-full bg-emerald-500"></div>
                    </div>
                    <p class="text-xs/5 text-gray-500">Online</p>
                </div>
            </div>
            <svg
                viewBox="0 0 20 20"
                fill="currentColor"
                data-slot="icon"
                aria-hidden="true"
                class="size-5 flex-none text-gray-400"
            >
                <path
                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                />
            </svg>
        </div>
    </li>
    <li class="relative flex justify-between gap-x-6 py-5">
        <div class="flex min-w-0 gap-x-4">
            <img
                src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
                class="size-12 flex-none rounded-full bg-gray-50"
            />
            <div class="min-w-0 flex-auto">
                <p class="text-sm/6 font-semibold text-gray-900">
                    <a href="#">
                        <span
                            class="absolute inset-x-0 -top-px bottom-0"
                        ></span>
                        Lindsay Walton
                    </a>
                </p>
                <p class="mt-1 flex text-xs/5 text-gray-500">
                    <a
                        href="mailto:lindsay.walton@example.com"
                        class="relative truncate hover:underline"
                        >lindsay.walton@example.com</a
                    >
                </p>
            </div>
        </div>
        <div class="flex shrink-0 items-center gap-x-4">
            <div class="hidden sm:flex sm:flex-col sm:items-end">
                <p class="text-sm/6 text-gray-900">Front-end Developer</p>
                <p class="mt-1 text-xs/5 text-gray-500">
                    Last seen <time datetime="2023-01-23T13:23Z">3h ago</time>
                </p>
            </div>
            <svg
                viewBox="0 0 20 20"
                fill="currentColor"
                data-slot="icon"
                aria-hidden="true"
                class="size-5 flex-none text-gray-400"
            >
                <path
                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                />
            </svg>
        </div>
    </li>
    <li class="relative flex justify-between gap-x-6 py-5">
        <div class="flex min-w-0 gap-x-4">
            <img
                src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
                class="size-12 flex-none rounded-full bg-gray-50"
            />
            <div class="min-w-0 flex-auto">
                <p class="text-sm/6 font-semibold text-gray-900">
                    <a href="#">
                        <span
                            class="absolute inset-x-0 -top-px bottom-0"
                        ></span>
                        Courtney Henry
                    </a>
                </p>
                <p class="mt-1 flex text-xs/5 text-gray-500">
                    <a
                        href="mailto:courtney.henry@example.com"
                        class="relative truncate hover:underline"
                        >courtney.henry@example.com</a
                    >
                </p>
            </div>
        </div>
        <div class="flex shrink-0 items-center gap-x-4">
            <div class="hidden sm:flex sm:flex-col sm:items-end">
                <p class="text-sm/6 text-gray-900">Designer</p>
                <p class="mt-1 text-xs/5 text-gray-500">
                    Last seen <time datetime="2023-01-23T13:23Z">3h ago</time>
                </p>
            </div>
            <svg
                viewBox="0 0 20 20"
                fill="currentColor"
                data-slot="icon"
                aria-hidden="true"
                class="size-5 flex-none text-gray-400"
            >
                <path
                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                />
            </svg>
        </div>
    </li>
    <li class="relative flex justify-between gap-x-6 py-5">
        <div class="flex min-w-0 gap-x-4">
            <img
                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
                class="size-12 flex-none rounded-full bg-gray-50"
            />
            <div class="min-w-0 flex-auto">
                <p class="text-sm/6 font-semibold text-gray-900">
                    <a href="#">
                        <span
                            class="absolute inset-x-0 -top-px bottom-0"
                        ></span>
                        Tom Cook
                    </a>
                </p>
                <p class="mt-1 flex text-xs/5 text-gray-500">
                    <a
                        href="mailto:tom.cook@example.com"
                        class="relative truncate hover:underline"
                        >tom.cook@example.com</a
                    >
                </p>
            </div>
        </div>
        <div class="flex shrink-0 items-center gap-x-4">
            <div class="hidden sm:flex sm:flex-col sm:items-end">
                <p class="text-sm/6 text-gray-900">Director of Product</p>
                <div class="mt-1 flex items-center gap-x-1.5">
                    <div class="flex-none rounded-full bg-emerald-500/20 p-1">
                        <div class="size-1.5 rounded-full bg-emerald-500"></div>
                    </div>
                    <p class="text-xs/5 text-gray-500">Online</p>
                </div>
            </div>
            <svg
                viewBox="0 0 20 20"
                fill="currentColor"
                data-slot="icon"
                aria-hidden="true"
                class="size-5 flex-none text-gray-400"
            >
                <path
                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                />
            </svg>
        </div>
    </li>
</ul>