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.6k

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

2 years ago

20.3k
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.8k
Nested list

Author:
Lukas Müller

2 years ago

12.6k
Hierarchy list

Author:
Anonymous

1 year ago

10k
Responsive list

Author:
Sienna

2 years ago

11.7k
Todo list template

Author:
Steven Kuhn

2 years ago

18.1k
Todo list in tailwlind

Author:
Kofi Osei

2 years ago

16.1k
Responsive list with 3 columns

Author:
TailwindFlex

2 years ago

12.8k
Basic list

Author:
Sophia Baker

2 years ago

10.2k
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

5 months ago

882
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

3 months ago

838
List of steps

Author:
Leif99

2 years ago

13.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components