Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Sidebar With User Profile</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-50 flex min-h-screen"> <aside class="w-72 bg-slate-900 border-r border-slate-800 flex flex-col p-6"> <!-- Header --> <div class="mb-10 flex items-center space-x-3"> <div class="h-10 w-10 bg-gradient-to-tr from-purple-500 to-pink-500 rounded-xl shadow-lg ring-1 ring-white/20"></div> <span class="text-white font-black text-xl tracking-tighter uppercase">Apex</span> </div> <!-- User Profile Card --> <div class="bg-white/5 border border-white/10 rounded-2xl p-5 mb-8 flex items-center"> <div class="relative"> <img class="h-11 w-11 rounded-full border-2 border-purple-500 p-0.5" src="https://i.pravatar.cc/100?u=apexuser" alt="User"> <div class="absolute bottom-0 right-0 h-3 w-3 bg-emerald-500 border-2 border-slate-900 rounded-full"></div> </div> <div class="ml-4"> <p class="text-xs font-black text-white uppercase tracking-wider">Jordan Miles</p> <p class="text-[10px] text-slate-500 font-bold uppercase">Pro Account</p> </div> </div> <nav class="flex-1 space-y-1"> <a href="##" class="flex items-center space-x-4 px-4 py-3 text-slate-400 hover:text-white hover:bg-white/5 rounded-xl transition-all font-bold text-sm"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" /></svg> <span>Insight</span> </a> <a href="##" class="flex items-center space-x-4 px-4 py-3 text-slate-400 hover:text-white hover:bg-white/5 rounded-xl transition-all font-bold text-sm"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /></svg> <span>Messages</span> </a> <a href="##" class="flex items-center space-x-4 px-4 py-3 text-slate-400 hover:text-white hover:bg-white/5 rounded-xl transition-all font-bold text-sm"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" /></svg> <span>Controls</span> </a> </nav> <!-- Bottom Action --> <div class="pt-6 border-t border-slate-800"> <a href="##" class="flex items-center space-x-4 px-4 py-3 text-slate-500 hover:text-rose-400 font-bold transition-colors text-sm"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg> <span>Terminate Session</span> </a> </div> </aside> <main class="flex-1 p-16"> <div class="h-full bg-white rounded-3xl border border-slate-200 shadow-sm p-12 text-center flex flex-col items-center justify-center"> <h1 class="text-3xl font-black text-slate-800 mb-4 tracking-tight">Identity & Navigation</h1> <p class="text-slate-500 max-w-md">Integrating the user profile into the sidebar is a classic pattern for SaaS platforms, providing a quick dashboard of the current user's status.</p> </div> </main> </body> </html>
