Home
Anonymous
Hierarchy list

Hierarchy list

This tailwind example is contributed by Anonymous, on 08-Sep-2023. Component is made with Tailwind CSS v3. It is responsive.

List

Author Anonymous

9.9k

Fork Fullscreen

<body class="bg-gray-100">
    <div class="container mx-auto p-6">
        
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h1 class="text-2xl font-semibold mb-4">Organization Hierarchy</h1>
            <div class="space-y-6">
                
                <div class="flex items-center space-x-4">
                    <div
                        class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
                        CEO</div>
                    <div>
                        <h2 class="text-lg font-semibold">John Doe</h2>
                        <p class="text-gray-600">Founder & CEO</p>
                    </div>
                </div>

<div class="ml-8 space-y-4">
                    
                    <div class="flex items-center space-x-4">
                        <div
                            class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-semibold">
                            HR</div>
                        <div>
                            <h3 class="text-md font-semibold">Alice Johnson</h3>
                            <p class="text-gray-600">HR Manager</p>
                        </div>
                    </div>

<div class="ml-8 space-y-2">
                        
                        <div class="flex items-center space-x-4">
                            <div
                                class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white font-semibold">
                                E1</div>
                            <div>
                                <p class="text-sm font-semibold">Emma Smith</p>
                                <p class="text-gray-600">HR Specialist</p>
                            </div>
                        </div>

<div class="flex items-center space-x-4">
                            <div
                                class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white font-semibold">
                                E2</div>
                            <div>
                                <p class="text-sm font-semibold">James Wilson</p>
                                <p class="text-gray-600">HR Assistant</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Related Examples

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

Author:
Noob

2 years ago

20.2k
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.7k
Nested list section
List with soft background colors. List with Hierarchy

Author:
Orion.c

2 years ago

11.6k
Nested list

Author:
Lukas Müller

2 years ago

12.6k
Stacked list

Author:
Odessa Young

2 years ago

18.4k
List example

Author:
Isabella Kowalski

2 years ago

13.3k
Feature List
Feature List Card (Responsive and supports Dark Mode)

Author:
Mr Robot

2 years ago

10.2k
List example

Author:
Wagner Augusto

9 months ago

1.3k
Features list with icons

Author:
L.J. Weber

2 years ago

13.5k
Timeline
timeline with journey

Author:
Abhiraj

5 months ago

618
List component

Author:
Shru hari

1 year ago

2.3k
Event timeline list

Author:
Laurits

2 years ago

12.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components