Home
Anonymous
Organization Hierarchy list

Organization Hierarchy list

Forked from> @anonymous/hierarchy-list

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

Other List

Author Anonymous

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

Author:
Noob

3 years ago

20.8k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

9 months ago

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

6 months ago

1.4k
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

4 months ago

462
htmlcss1

Author:
Anonymous

3 months ago

172
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

4 months ago

1.2k
Forgot password?
you can change password an time

Author:
gidy

4 months ago

496
Age verification 18+

Author:
Maxim

9 months ago

734
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

1 year ago

1.9k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

5 months ago

714
Payment form

Author:
ORGIN_DREAMS

4 months ago

437
Invoice
simpel invoice digital

Author:
Rushikesh Latpate

3 months ago

426

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components