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

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

Author:
Sienna

2 years ago

12k
Users ranking list with points

Author:
Leif99

2 years ago

11.6k
List of links

Author:
Prajwal Hallale

2 years ago

10.2k
Todo list in tailwlind

Author:
Kofi Osei

2 years ago

16.4k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

5 months ago

1.1k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.8k
List component

Author:
Shru hari

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components