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>