sidebar dash

This tailwind example is contributed by Omer fils ELENGA, on 04-Jan-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are drawer,Info, Show info, Statistics,Admin Dashboard, User dashboard

Card Sidebar Stats Menu Dashboard

Author Omer fils ELENGA

Tailwind v3.4 961 3

Fork Fullscreen

<div class="h-screen flex overflow-hidden bg-gray-100">
    
    <div id="overlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 transition-opacity duration-300 opacity-0 pointer-events-none" 
         onclick="closeSidebar()"></div>
    
    
    <div id="sidebar" class="fixed inset-y-0 left-0 w-56 bg-white/10 backdrop-blur-xl border-r border-white/20 shadow-xl z-40 transition-all duration-300 transform -translate-x-full">
        
        <div class="h-full flex flex-col">
            
            <div class="p-6 border-b border-white/10">
                <div class="flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#ffffff" viewBox="0 0 24 24" class="text-gray-800">
                        <path d="m12,4c-6.02,0-9.71-.96-9.74-.97l-.51,1.93c.05.01.49.13,1.26.27v1.76h1.88l-.12,2h-1.76v2h1.65l-.64,10.94,2,.12.65-11.06h10.66l.69,11.06,2-.12-.68-10.94h1.69v-2h-1.81l-.12-2h1.94v-1.76c.77-.15,1.21-.26,1.26-.27l-.51-1.93s-3.72.97-9.74.97Zm-5.12,3h4.12v2h-4.23l.12-2Zm10.3,2h-4.19v-2h4.06l.12,2Z"></path>
                    </svg>
                    <h1 class="ml-3 text-xl font-bold text-gray-800">Logo</h1>
                </div>
            </div>
            
            
            <div class="flex-1 p-4 overflow-y-auto">
                <ul class="space-y-2">
                    <li>
                        <a href="#" class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/20 transition-all duration-200 group">
                            <div class="w-10 h-10 flex items-center justify-center bg-blue-500 rounded-lg group-hover:scale-110 transition-transform">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ffffff" viewBox="0 0 24 24">
                                    <path d="M3 13h1v7c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-7h1c.4 0 .77-.24.92-.62.15-.37.07-.8-.22-1.09l-8.99-9a.996.996 0 0 0-1.41 0l-9.01 9c-.29.29-.37.72-.22 1.09s.52.62.92.62Zm9-8.59 6 6V20H6v-9.59z"></path>
                                </svg>
                            </div>
                            <span class="text-gray-800 font-medium">Home</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href="#" class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/20 transition-all duration-200 group">
                            <div class="w-10 h-10 flex items-center justify-center bg-purple-500 rounded-lg group-hover:scale-110 transition-transform">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                </svg>
                            </div>
                            <span class="text-gray-800 font-medium">Dashboard</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href="#" class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/20 transition-all duration-200 group">
                            <div class="w-10 h-10 flex items-center justify-center bg-green-500 rounded-lg group-hover:scale-110 transition-transform">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <span class="text-gray-800 font-medium">Tasks</span>
                        </a>
                    </li>
                    
                    <li>
                        <a href="#" class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/20 transition-all duration-200 group">
                            <div class="w-10 h-10 flex items-center justify-center bg-yellow-500 rounded-lg group-hover:scale-110 transition-transform">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </div>
                            <span class="text-gray-800 font-medium">Team</span>
                        </a>
                    </li>
                </ul>
                
                
                <div class="mt-8 pt-6 border-t border-white/10">
                    <ul class="space-y-2">
                        <li>
                            <a href="#" class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/20 transition-all duration-200 group">
                                <div class="w-10 h-10 flex items-center justify-center bg-gray-500 rounded-lg">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                </div>
                                <span class="text-gray-800 font-medium">Settings</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

<div class="flex-1 flex flex-col">
        
        <header class="sticky top-0 z-20 ">
            <div class="px-6 py-4 flex items-center justify-between">
               
                
                <div class="flex items-center gap-3">

<div class="flex bg-white gap-2 rounded-full p-1 "> 
 <div class="flex items-center gap-4">
               
                    
                    <div class="relative">
                        <input type="search" placeholder="Search..." class="pl-10 hover:pr-4  hover:w-[200px]   py-2 w-[00px] rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                </div>
                        <button id="action-button" class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ffffff" viewBox="0 0 24 24" transform="scale(-1,1)">
                                <path d="m20,9h-8V2c0-.45-.3-.85-.74-.97-.44-.12-.9.07-1.12.46L3.14,13.5c-.18.31-.18.69,0,1s.51.5.87.5h8v7c0,.45.3.85.74.97.09.02.17.03.26.03.35,0,.68-.18.86-.5l7-12c.18-.31.18-.69,0-1s-.51-.5-.87-.5Zm-6,9.3v-4.3c0-.55-.45-1-1-1h-7.26l4.26-7.3v4.3c0,.55.45,1,1,1h7.26l-4.26,7.3Z"></path>
                            </svg>
                            <span class="font-medium">Action</span>
                        </button>

<button class="p-2 rounded-full hover:bg-gray-100 transition-colors" aria-label="Notifications">
                            <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                            </svg>
                        </button>
                    
                    </div>
                 </div>
            </div>
        </header>
        
        
        <main class="flex-1 p-6 overflow-y-auto">
            <div class="max-w-6xl mx-auto">
                <h1 class="text-3xl font-bold text-gray-800 mb-2">Welcome back!</h1>
                <p class="text-gray-600 mb-8">Here's what's happening with your projects today.</p>
                
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-semibold text-gray-700">Total Revenue</h3>
                            <div class="w-10 h-10 flex items-center justify-center bg-blue-100 rounded-lg">
                                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                        </div>
                        <p class="text-2xl font-bold text-gray-800">$24,580</p>
                        <p class="text-sm text-green-600 mt-2">↑ 12.5% from last month</p>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-semibold text-gray-700">Active Users</h3>
                            <div class="w-10 h-10 flex items-center justify-center bg-green-100 rounded-lg">
                                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13 1h-6"></path>
                                </svg>
                            </div>
                        </div>
                        <p class="text-2xl font-bold text-gray-800">1,425</p>
                        <p class="text-sm text-green-600 mt-2">↑ 8.2% from last month</p>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-semibold text-gray-700">Tasks Completed</h3>
                            <div class="w-10 h-10 flex items-center justify-center bg-purple-100 rounded-lg">
                                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                        </div>
                        <p class="text-2xl font-bold text-gray-800">84%</p>
                        <p class="text-sm text-green-600 mt-2">↑ 3.1% from last month</p>
                    </div>
                </div>
                
                
                <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">Recent Activity</h2>
                    <div class="space-y-4">
                        <div class="flex items-center gap-4 p-3 hover:bg-gray-50 rounded-lg transition-colors">
                            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-blue-600"></div>
                            <div class="flex-1">
                                <p class="text-gray-800 font-medium">John Doe completed a task</p>
                                <p class="text-sm text-gray-500">2 hours ago</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-4 p-3 hover:bg-gray-50 rounded-lg transition-colors">
                            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-400 to-green-600"></div>
                            <div class="flex-1">
                                <p class="text-gray-800 font-medium">New project created</p>
                                <p class="text-sm text-gray-500">4 hours ago</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-4 p-3 hover:bg-gray-50 rounded-lg transition-colors">
                            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-400 to-purple-600"></div>
                            <div class="flex-1">
                                <p class="text-gray-800 font-medium">Monthly report generated</p>
                                <p class="text-sm text-gray-500">1 day ago</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>