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 Mobile Slide-In Sidebar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex h-screen overflow-hidden" x-data="{ sidebarOpen: false }"> <!-- Mobile Menu Button --> <div class="fixed top-6 right-6 z-50 md:hidden"> <button @click="sidebarOpen = true" class="h-14 w-14 bg-indigo-600 rounded-2xl flex items-center justify-center text-white shadow-2xl shadow-indigo-200 transition-transform active:scale-90"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg> </button> </div> <!-- Background Overlay --> <div x-show="sidebarOpen" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="sidebarOpen = false" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-40" style="display: none;" ></div> <!-- Sliding Sidebar --> <aside x-show="sidebarOpen" @click.away="sidebarOpen = false" x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition-transform ease-in duration-200" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="fixed inset-y-0 left-0 w-80 bg-white shadow-3xl z-50 p-10 flex flex-col" style="display: none;" > <!-- Header --> <div class="flex items-center justify-between mb-12"> <div class="text-3xl font-black text-slate-800 tracking-tighter">SLIDE.</div> <button @click="sidebarOpen = false" class="text-slate-400 hover:text-slate-900 transition font-black text-lg">×</button> </div> <nav class="flex-1 space-y-2"> <a href="##" class="block text-2xl font-black text-slate-900 hover:text-indigo-600 transition-colors">Workspace</a> <a href="##" class="block text-2xl font-black text-slate-900 hover:text-indigo-600 transition-colors">Documents</a> <a href="##" class="block text-2xl font-black text-slate-900 hover:text-indigo-600 transition-colors">Activity</a> <a href="##" class="block text-2xl font-black text-slate-900 hover:text-indigo-600 transition-colors border-b border-slate-100 pb-8">Community</a> </nav> <div class="pt-8 space-y-4"> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-2">Authenticated</p> <div class="bg-slate-50 rounded-[2rem] p-6 border border-slate-100"> <img class="h-10 w-10 rounded-full border border-white mb-3" src="https://i.pravatar.cc/100?u=slideuser" alt="User"> <p class="text-sm font-bold text-slate-800 tracking-tight">Casey Rivers</p> <p class="text-[10px] text-slate-400 font-bold uppercase underline underline-offset-4 cursor-pointer">Log Out Session</p> </div> </div> </aside> <!-- Content area for background --> <main class="flex-1 p-16 flex flex-col items-center justify-center text-center"> <div class="max-w-xl"> <h1 class="text-5xl font-black text-slate-800 mb-6 italic shadow-slate-100 drop-shadow-2xl">MOBILE HUD.</h1> <p class="text-slate-500 text-lg leading-relaxed font-bold underline decoration-slate-100 decoration-8 underline-offset-8">On mobile devices, navigation often lives in a slide-out drawer to maximize the viewport area.</p> </div> </main> <!-- Desktop Note --> <div class="fixed bottom-6 left-1/2 -translate-x-1/2 hidden md:block px-6 py-2 bg-slate-900 text-white text-[10px] font-black uppercase tracking-widest rounded-full opacity-50">Resize to mobile to experience the slide-in.</div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
