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

6.8k

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

2 years ago

18.5k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

1 month ago

338
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

1 year ago

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

Author:
Orion.c

1 year ago

10.3k
Icon group

Author:
Conan Hilton

1 year ago

8.9k
Basic list

Author:
Leon Bachmann

2 years ago

9.3k
Responsive fullscreen youtube video

Author:
Anonymous

1 year ago

7.7k
Hierarchy list

Author:
Anonymous

1 year ago

8.9k
List of steps

Author:
Leif99

1 year ago

12.4k
Calculator
A Basic Calculator

Author:
Debbie F

4 months ago

615
Basic list

Author:
Sophia Baker

1 year ago

9.4k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

7 months ago

866

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components