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 Tooltip Icons</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-900 flex min-h-screen"> <!-- Minimal Icon Sidebar with Tooltips --> <aside class="w-20 bg-black/60 backdrop-blur-3xl border-r border-white/10 flex flex-col items-center py-8 space-y-8 sticky top-0 h-screen"> <!-- Pulse Brand --> <div class="h-10 w-10 bg-gradient-to-tr from-cyan-400 to-blue-600 rounded-2xl flex items-center justify-center shadow-xl shadow-cyan-500/10 rotate-12 transition-all hover:rotate-0 hover:scale-110"> <span class="text-white font-black text-xs select-none">T</span> </div> <nav class="flex-1 space-y-6 flex flex-col items-center w-full"> <!-- Icon Navigation with Tooltip on Hover --> <div class="relative group"> <a href="##" class="p-4 rounded-2xl text-slate-500 hover:text-white hover:bg-slate-800 transition shadow-inner flex items-center justify-center"> <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="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> </a> <!-- Tooltip --> <div class="absolute left-full ml-4 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-slate-800 text-white text-[10px] font-black uppercase tracking-widest rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 group-hover:translate-x-1 transition-all">Dashboard</div> </div> <div class="relative group"> <a href="##" class="p-4 rounded-2xl text-slate-500 hover:text-white hover:bg-slate-800 transition shadow-inner flex items-center justify-center"> <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg> </a> <!-- Tooltip --> <div class="absolute left-full ml-4 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-slate-800 text-white text-[10px] font-black uppercase tracking-widest rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 group-hover:translate-x-1 transition-all">Analytics</div> </div> <div class="relative group"> <a href="##" class="p-4 rounded-2xl text-slate-500 hover:text-white hover:bg-slate-800 transition shadow-inner flex items-center justify-center"> <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> </a> <!-- Tooltip --> <div class="absolute left-full ml-4 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-slate-800 text-white text-[10px] font-black uppercase tracking-widest rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 group-hover:translate-x-1 transition-all">Billing</div> </div> </nav> <div class="relative group mt-auto"> <button class="h-10 w-10 rounded-full border border-white/20 p-0.5 hover:ring-2 hover:ring-blue-500 transition-all"> <img class="h-full w-full rounded-full" src="https://i.pravatar.cc/100?u=tooltipuser" alt="User"> </button> <!-- Tooltip --> <div class="absolute left-full ml-4 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-slate-800 text-white text-[10px] font-black uppercase tracking-widest rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 group-hover:translate-x-1 transition-all whitespace-nowrap">Profile & Settings</div> </div> </aside> <!-- Content --> <main class="flex-1 flex flex-col items-center justify-center p-12 bg-white relative"> <div class="max-w-xl text-center"> <div class="mb-10 text-xs font-black text-slate-300 uppercase tracking-[0.4em] leading-relaxed">System Intelligence.</div> <h1 class="text-6xl font-black text-slate-900 mb-8 tracking-tighter italic shadow-slate-100 drop-shadow-2xl">TOOLTIP HUD.</h1> <p class="text-slate-500 text-lg leading-relaxed font-bold underline decoration-slate-100 decoration-8 underline-offset-8">Hover over the sidebar icons to reveal hidden navigation tooltips. This minimizes visual noise while keeping UX intuitive.</p> </div> </main> </body> </html>
