Organization Hierarchy list

Forked from @anonymous/hierarchy-list

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

Other List

Author Anonymous

Tailwind v3.4 9.8k 19

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>
            <ul class="pl-4">
                
                <li class="mb-4">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                            <span class="text-white font-bold">CEO</span>
                        </div>
                        <div>
                            <p class="text-lg font-semibold">John Doe</p>
                            <p class="text-gray-600">CEO</p>
                        </div>
                    </div>
                    
                    <ul class="pl-8">
                        <li class="mb-4">
                            <div class="flex items-center space-x-2">
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                    <span class="text-white font-bold">VP</span>
                                </div>
                                <div>
                                    <p class="text-lg font-semibold">Jane Smith</p>
                                    <p class="text-gray-600">VP of Sales</p>
                                </div>
                            </div>
                            
                            <ul class="pl-8">
                                <li>
                                    <div class="flex items-center space-x-2">
                                        <div
                                            class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                                            <span class="text-white font-bold">Mgr</span>
                                        </div>
                                        <div>
                                            <p class="text-lg font-semibold">Alice Johnson</p>
                                            <p class="text-gray-600">Sales Manager</p>
                                        </div>
                                    </div>
                                </li>
                                
                            </ul>
                        </li>
                        
                    </ul>
                </li>
                
            </ul>
        </div>
    </div>
</body>

Related Examples

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

Noob

4 years ago

21.8k
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

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

Abdul Baset Bappy

1 year ago

2.6k
Todo List with Dark theme
Todo List with Dark theme

Muzammil Riaz

1 year ago

1.9k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

622
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

476
InGen

Dennis Kamp

7 months ago

437
htmlcss1

Anonymous

1 year ago

889
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Anonymous

1 year ago

1.2k
Homepage event

Anonymous

1 year ago

1.2k
Stacked Checkboxes

kishan pc

2 years ago

3.9k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Nick Girga

1 year ago

1.4k