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

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