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

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

3 years ago

21.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

20.3k
Nested list section
List with soft background colors. List with Hierarchy

Author:
Orion.c

2 years ago

12k
Nested list

Author:
Lukas Müller

3 years ago

13.3k
Stacked list

Author:
Odessa Young

2 years ago

19k
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

1 year ago

1.5k
Items list
list in fieldset

Author:
Prajwal Hallale

3 years ago

9.3k
Logo cloud

Author:
Alok

2 years ago

10.5k
User list
User list

Author:
Anonymous

8 months ago

468
About our apps UI Components
A visual collection of our most recent works - each piece crafted with intention, emotion and style.

Author:
Alif Bima Pradana

5 days ago

76
Order Delivered List

Author:
ABDO-SY

9 months ago

801
Features list with heading

Author:
Leon Bachmann

3 years ago

11.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components