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 v3.4. It is responsive.

List

Author Orion.c

Tailwind v3.4 12.4k 11

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

Noob

4 years ago

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

Prajwal Hallale

3 years ago

20.6k
Nested list

Lukas Müller

3 years ago

14.1k
Hierarchy list

Anonymous

3 years ago

11.5k
Responsive list

Sienna

3 years ago

12.8k
Todo list template

Steven Kuhn

3 years ago

19.5k
Todo list in tailwlind

Kofi Osei

3 years ago

18.3k
Items list
list in fieldset

Prajwal Hallale

4 years ago

9.3k
Item List with title
created by using fieldset and legend tags

Prashant

4 years ago

12.1k
List with highlighted text

Amit Pachange

3 years ago

10.5k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

9 months ago

785
Bullet points list
for sections like "Why Choose Us"

Orson Kincaid

2 years ago

2.6k