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 Floating Sidebar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-100 min-h-screen p-6"> <div class="flex flex-col md:flex-row gap-6 h-full max-w-7xl mx-auto"> <!-- Floating Sidebar --> <aside class="md:w-72 bg-white rounded-[2.5rem] shadow-2xl shadow-slate-200 border border-white p-8 flex flex-col h-[calc(100vh-3rem)] sticky top-6"> <!-- Header --> <div class="mb-12 flex items-center justify-between"> <div class="h-10 w-10 bg-slate-900 rounded-2xl flex items-center justify-center text-white font-black text-xl italic select-none">F</div> <button class="h-10 w-10 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-400 hover:text-slate-900 transition"> <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> </button> </div> <nav class="flex-1 space-y-2"> <p class="text-[10px] font-black text-slate-300 uppercase tracking-widest pl-4 mb-4">Discovery</p> <a href="##" class="flex items-center space-x-4 px-6 py-4 bg-slate-50 text-slate-900 rounded-3xl font-black text-sm transition shadow-sm border border-slate-100"> <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>Exploration</span> </a> <a href="##" class="flex items-center space-x-4 px-6 py-4 text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-3xl font-bold text-sm transition-all group"> <svg class="h-5 w-5 opacity-40 group-hover:opacity-100 transition-opacity" 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>Laboratory</span> </a> <a href="##" class="flex items-center space-x-4 px-6 py-4 text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-3xl font-bold text-sm transition-all group"> <svg class="h-5 w-5 opacity-40 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-7.714 2.143L11 21l-2.286-6.857L1 12l7.714-2.143L11 3z" /></svg> <span>Research</span> </a> </nav> <!-- User Card --> <div class="mt-auto px-2"> <div class="bg-indigo-600 rounded-[2rem] p-6 text-white text-center shadow-xl shadow-indigo-100 relative overflow-hidden group"> <div class="h-20 w-20 bg-white/20 rounded-full blur-2xl absolute -top-10 -right-10 group-hover:scale-150 transition-transform duration-500"></div> <p class="text-[10px] font-black uppercase tracking-widest opacity-60 mb-2">Workspace</p> <p class="text-sm font-black mb-4 leading-tight">Project Genesis</p> <button class="bg-white text-indigo-600 px-6 py-2 rounded-full text-[10px] font-black uppercase shadow-lg active:scale-95 transition">Manage</button> </div> </div> </aside> <!-- Main Workspace --> <main class="flex-1 bg-white rounded-[2.5rem] shadow-2xl border border-white p-12 overflow-y-auto"> <h1 class="text-4xl font-black text-slate-800 mb-6 tracking-tight">Floating Ecosystem.</h1> <p class="text-slate-500 text-lg leading-relaxed max-w-2xl mb-12">By detaching the sidebar from the window edges and giving it rounded corners, we create a more approachable, modern, and "layered" interface feel.</p> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 h-96"> <div class="bg-slate-50 rounded-[2rem] border border-slate-100 p-8 flex items-center justify-center text-slate-300 italic">Work area 1</div> <div class="bg-slate-50 rounded-[2rem] border border-slate-100 p-8 flex items-center justify-center text-slate-300 italic">Work area 2</div> </div> </main> </div> </body> </html>
