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 Collapsible Sidebar Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> <body class="bg-gray-50 min-h-screen flex antialiased" x-data="{ expanded: true }"> <!-- Sidebar --> <aside class="bg-slate-900 text-white flex-shrink-0 transition-all duration-500 flex flex-col z-50 overflow-hidden" :class="expanded ? 'w-80' : 'w-24'"> <div class="h-24 flex items-center px-8 border-b border-white/5 relative"> <div class="flex items-center gap-4 min-w-[200px]" x-show="expanded" x-transition.opacity> <div class="h-8 w-8 bg-indigo-600 rounded-lg"></div> <span class="text-lg font-black tracking-tighter">VANGUARD</span> </div> <div class="flex items-center justify-center w-full" x-show="!expanded" x-transition.opacity> <div class="h-8 w-8 bg-indigo-600 rounded-lg"></div> </div> <!-- Toggle Button --> <button @click="expanded = !expanded" class="absolute -right-3 top-1/2 -translate-y-1/2 h-8 w-8 bg-indigo-600 rounded-lg flex items-center justify-center shadow-xl hover:scale-110 transition-transform cursor-pointer border-2 border-slate-900"> <svg class="h-4 w-4 transition-transform duration-500" :class="expanded ? 'rotate-180' : 'rotate-0'" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7" /></svg> </button> </div> <div class="flex-1 py-10 px-4 space-y-2"> <a href="#" class="flex items-center gap-6 p-4 bg-white/5 rounded-2xl group relative"> <svg class="h-6 w-6 text-indigo-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg> <span class="text-[10px] font-black uppercase tracking-[0.2em]" x-show="expanded" x-transition.opacity>Apex Overview</span> <div x-show="!expanded" class="absolute left-20 px-3 py-1 bg-slate-800 text-white text-[9px] font-black uppercase tracking-widest rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50">Overview</div> </a> <a href="#" class="flex items-center gap-6 p-4 hover:bg-white/5 rounded-2xl group relative transition-colors text-slate-400 hover:text-white"> <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> <span class="text-[10px] font-black uppercase tracking-[0.2em]" x-show="expanded" x-transition.opacity>Protocols</span> </a> <a href="#" class="flex items-center gap-6 p-4 hover:bg-white/5 rounded-2xl group relative transition-colors text-slate-400 hover:text-white"> <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg> <span class="text-[10px] font-black uppercase tracking-[0.2em]" x-show="expanded" x-transition.opacity>Security Index</span> </a> </div> <div class="p-4 border-t border-white/5"> <div class="flex items-center gap-4 p-4 rounded-2xl hover:bg-white/5 transition-colors"> <div class="h-8 w-8 bg-indigo-500 rounded-full border-2 border-slate-900 shrink-0"></div> <div x-show="expanded" x-transition.opacity class="flex-1 min-w-0"> <p class="text-[10px] font-black uppercase tracking-tight truncate">Arch. Zero</p> </div> </div> </div> </aside> <!-- Main Area --> <main class="flex-1 overflow-y-auto"> <div class="p-12 md:p-24 space-y-12"> <div class="flex items-end justify-between border-b border-slate-200 pb-12"> <div> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Integrated Layout</span> <h1 class="text-5xl font-black text-slate-900 tracking-tighter">Collapsible Node</h1> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div class="h-[40rem] bg-white rounded-[4rem] border border-slate-200 shadow-sm p-12"> <div class="h-full w-full bg-slate-50/50 rounded-[3rem] border border-dashed border-slate-200"></div> </div> <div class="space-y-12"> <div class="h-72 bg-white rounded-[3rem] border border-slate-200 shadow-sm p-10"></div> <div class="h-72 bg-white rounded-[3rem] border border-slate-200 shadow-sm p-10"></div> </div> </div> </div> </main> </body> </html>
