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 App Shell 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 h-screen flex overflow-hidden antialiased" x-data="{ sidebarOpen: false }"> <!-- Mobile Sidebar Overlay --> <div x-show="sidebarOpen" @click="sidebarOpen = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-40 lg:hidden" x-transition.opacity></div> <!-- Sidebar Navigation --> <aside class="fixed inset-y-0 left-0 w-80 bg-slate-900 text-white transform transition-transform duration-500 z-50 lg:relative lg:translate-x-0" :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"> <div class="h-24 flex items-center px-10 border-b border-white/5"> <span class="text-xl font-black text-white tracking-tighter uppercase">Vanguard.OS</span> </div> <div class="flex-1 overflow-y-auto px-6 py-10 space-y-12 scrollbar-hide"> <nav class="space-y-1"> <a href="#" class="flex items-center gap-4 p-4 bg-indigo-600 text-white rounded-2xl group transition-all"> <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.5" 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]">Dashboard</span> </a> <a href="#" class="flex items-center gap-4 p-4 text-slate-400 hover:text-white hover:bg-white/5 rounded-2xl group transition-all"> <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg> <span class="text-[10px] font-black uppercase tracking-[0.2em]">Sectors</span> </a> </nav> <div class="px-4"> <h3 class="text-[9px] font-black text-slate-500 uppercase tracking-[0.4em] mb-6">Active Nodes</h3> <div class="space-y-4"> <div class="flex items-center gap-3"> <div class="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></div> <span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest">US-EAST-ALPHA</span> </div> <div class="flex items-center gap-3"> <div class="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></div> <span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest">EU-WEST-APEX</span> </div> </div> </div> </div> <div class="p-6 border-t border-white/5"> <div class="bg-white/5 rounded-3xl p-6 flex items-center gap-4"> <div class="h-10 w-10 bg-indigo-500 rounded-2xl border border-white/10 shrink-0"></div> <div class="flex-1 min-w-0"> <p class="text-[10px] font-black uppercase tracking-tight truncate">Arch. Zero</p> <p class="text-[8px] font-black text-slate-500 uppercase tracking-widest">Primary Seed</p> </div> </div> </div> </aside> <!-- App Main Content Area --> <div class="flex-1 flex flex-col min-w-0"> <!-- Navbar --> <header class="h-24 px-8 md:px-12 flex items-center justify-between bg-white border-b border-slate-100 flex-shrink-0 sticky top-0 z-30"> <div class="flex items-center gap-6"> <button @click="sidebarOpen = true" class="lg:hidden h-12 w-12 flex items-center justify-center bg-slate-50 border border-slate-100 rounded-2xl text-slate-400"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor font-bold"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h16M4 18h7" /></svg> </button> <h2 class="text-xl font-black text-slate-900 tracking-tighter uppercase leading-none hidden sm:block">Apex View</h2> </div> <div class="flex items-center gap-3"> <div class="hidden sm:flex items-center gap-2 px-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl"> <div class="h-2 w-2 bg-emerald-500 rounded-full"></div> <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none">Healthy Sync</span> </div> <button class="h-12 w-12 bg-white border border-slate-100 rounded-2xl flex items-center justify-center text-slate-400 shadow-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="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" /></svg></button> </div> </header> <!-- Scrollable Canvas --> <main class="flex-1 overflow-y-auto w-full"> <div class="p-8 md:p-12 space-y-12 max-w-[1600px] mx-auto"> <!-- Page Head --> <div class="flex flex-col md:flex-row md:items-end justify-between gap-8 border-b border-slate-100 pb-12"> <div class="space-y-2"> <span class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em]">Integrated Hub</span> <h1 class="text-5xl font-black text-slate-900 tracking-tighter leading-none">Registry Console</h1> </div> <div class="flex gap-4"> <button class="px-8 py-4 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-2xl shadow-slate-900/20 hover:bg-indigo-600 transition-all">Export Manifest</button> </div> </div> <!-- Content Cards --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="h-40 bg-white rounded-[2.5rem] border border-slate-100 shadow-sm p-8"></div> <div class="h-40 bg-white rounded-[2.5rem] border border-slate-100 shadow-sm p-8"></div> <div class="h-40 bg-white rounded-[2.5rem] border border-slate-100 shadow-sm p-8"></div> <div class="h-40 bg-white rounded-[2.5rem] border border-slate-100 shadow-sm p-8"></div> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 pb-12"> <div class="lg:col-span-2 h-[60rem] bg-white rounded-[4rem] border border-slate-100 shadow-sm p-12"> <div class="h-full w-full bg-slate-50 rounded-[3.5rem] border border-dashed border-slate-200"></div> </div> <div class="space-y-8"> <div class="h-96 bg-slate-900 rounded-[3.5rem] p-12"></div> <div class="h-96 bg-white rounded-[3.5rem] border border-slate-100 shadow-sm p-12"></div> </div> </div> </div> </main> </div> </body> </html>
