Home
Wagner Augusto
List example

List example

This tailwind example is contributed by Wagner Augusto, on 19-Sep-2024. Component is made with Tailwind CSS v3.

List

<ul class="bg-white rounded-lg shadow divide-y divide-gray-200 w-full">
    <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>
</div>

Related Examples

Event timeline list

Author:
Laurits

3 years ago

13.4k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.5k
List of steps

Author:
Leif99

3 years ago

13.6k
About our apps UI Components
A visual collection of our most recent works - each piece crafted with intention, emotion and style.

Author:
Alif Bima Pradana

5 days ago

76
Features list

Author:
Leon Bachmann

3 years ago

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

10 months ago

1.9k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2k
List section
Beautiful list section with left border

Author:
Leon Bachmann

3 years ago

11.2k
Organization Hierarchy list

Author:
Anonymous

2 years ago

8.9k
Responsive list with icons

Author:
Prajwal Hallale

3 years ago

10.5k
Hierarchy list

Author:
Anonymous

2 years ago

10.7k
Twitter like users list

Author:
Simon Scheffer

3 years ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components