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

10.1k

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

Author:
Orion.c

2 years ago

11.7k
Nested list

Author:
Lukas Müller

2 years ago

12.7k
Stacked list

Author:
Odessa Young

2 years ago

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

Author:
Prashant

3 years ago

10.9k
User list
User list

Author:
Anonymous

2 months ago

222
Basic list

Author:
Leon Bachmann

2 years ago

10.1k
List with highlighted text

Author:
Amit Pachange

2 years ago

9.6k
Responsive list

Author:
Sienna

2 years ago

11.8k
Table of content
Show list of Table of content

Author:
Anonymous

1 year ago

5.3k
Basic list

Author:
Sophia Baker

2 years ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components