Home
Isabella Kowalski
List example

List example

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

List

13.5k

<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>

Related Examples

Todo list template

Author:
Steven Kuhn

2 years ago

18.2k
Stacked list

Author:
Odessa Young

2 years ago

18.6k
Todo list in tailwlind

Author:
Kofi Osei

2 years ago

16.2k
Responsive list

Author:
Sienna

2 years ago

11.8k
List example

Author:
Wagner Augusto

10 months ago

1.5k
Responsive list with icons

Author:
Prajwal Hallale

2 years ago

10.4k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

2 years ago

19.9k
Event timeline list

Author:
Laurits

2 years ago

12.9k
Minimal list section

Author:
Task Master

2 years ago

8.3k
Organization Hierarchy list

Author:
Anonymous

1 year ago

7.9k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

4 months ago

979
List with highlighted text

Author:
Amit Pachange

2 years ago

9.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components