Home
Orion.c
Nested list section

Nested list section

List with soft background colors.
List with Hierarchy

This tailwind example is contributed by Orion.c, on 07-Apr-2023. Component is made with Tailwind CSS v3. It is responsive.

List

Author Orion.c

11.7k

Fork Fullscreen

<ul class="divide-y divide-gray-300 bg-gray-50 rounded-md px-4 py-2 mt-4">
            <li class="py-2">
                <div class="flex items-center space-x-4">
                    <span class="text-md font-medium">Subitem 1</span>
                </div>
            </li>

<li class="py-2">
                <div class="flex items-center space-x-4">
                    <span class="text-md font-medium">Subitem 2</span>
                </div>

<ul class="divide-y divide-gray-300 bg-gray-100 rounded-md px-4 py-2 mt-2">
                    <li class="py-2">
                        <div class="flex items-center space-x-4">
                            <span class="text-sm font-medium">Sub-subitem 1</span>
                        </div>
                    </li>
                    <li class="py-2">
                        <div class="flex items-center space-x-4">
                            <span class="text-sm font-medium">Sub-subitem 2</span>
                        </div>
                    </li>
                </ul>
            </li>

<li class="py-2">
                <div class="flex items-center space-x-4">
                    <span class="text-md font-medium">Subitem 3</span>
                </div>
            </li>
        </ul>

</li>

</ul>

Related Examples

Nested list
A nested list is suitable for a table of contents / navigational list

Author:
Noob

3 years ago

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

20.1k
Nested list

Author:
Lukas Müller

2 years ago

13.1k
Hierarchy list

Author:
Anonymous

2 years ago

10.4k
Responsive list

Author:
Sienna

2 years ago

12.1k
Todo list template

Author:
Steven Kuhn

2 years ago

18.5k
Todo list in tailwlind

Author:
Kofi Osei

2 years ago

16.6k
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

2 years ago

6.9k
Twitter like users list

Author:
Simon Scheffer

2 years ago

11.7k
Basic list

Author:
Sophia Baker

2 years ago

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

7 months ago

1.5k
Basic list

Author:
Leon Bachmann

2 years ago

10.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components