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

21.3k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

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

11 months ago

1.9k
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

9 months ago

1.2k
Automation that delivers real results
We design high modern UI

Author:
Alif Bima Pradana

1 month ago

25
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 year ago

2.8k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

11 months ago

1.4k
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

8 months ago

1.1k
Glassmorphism form

Author:
Sophia Baker

2 years ago

18.6k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

3 years ago

20.3k
Projects List

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.8k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

2 months ago

176

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components