List example

This tailwind example is contributed by Isabella Kowalski, on 05-Mar-2023. Component is made with Tailwind v3.4.

Tailwind v3.4 14.9k 15

<ul class="bg-white rounded-lg shadow divide-y divide-gray-200 max-w-sm">
    <li class="px-6 py-4">
        <div class="flex justify-between">
            <span class="font-semibold text-lg">List Item 1</span>
            <span class="text-gray-500 text-xs">1 day ago</span>
        </div>
        <p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
    </li>
    <li class="px-6 py-4">
        <div class="flex justify-between">
            <span class="font-semibold text-lg">List Item 2</span>
            <span class="text-gray-500 text-xs">2 days ago</span>
        </div>
        <p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
    </li>
    <li class="px-6 py-4">
        <div class="flex justify-between">
            <span class="font-semibold text-lg">List Item 3</span>
            <span class="text-gray-500 text-xs">3 days ago</span>
        </div>
        <p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
    </li>
</ul>