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 Avatar With Tooltip</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center min-h-screen pt-16 p-6 antialiased"> <div class="flex items-center justify-center bg-white p-24 rounded-[3.5rem] shadow-3xl border border-white"> <div class="relative group" x-data="{ open: false }"> <!-- Avatar --> <button @mouseenter="open = true" @mouseleave="open = false" class="h-20 w-20 rounded-full border-4 border-indigo-50 shadow-xl overflow-hidden cursor-pointer hover:ring-8 hover:ring-indigo-500/10 transition-all" > <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150&h=150&fit=crop" class="h-full w-full object-cover"> </button> <!-- Tooltip --> <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2 scale-95" x-transition:enter-end="opacity-100 translate-y-0 scale-100" class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-48 pointer-events-none z-50" style="display: none;" > <div class="bg-slate-900 text-white p-4 rounded-2xl shadow-2xl relative"> <!-- Arrow --> <div class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-8 border-transparent border-t-slate-900"></div> <div class="flex flex-col gap-1 items-center text-center"> <span class="text-xs font-black tracking-tighter italic">Alexander Sterling.</span> <span class="text-[9px] font-bold text-indigo-400 uppercase tracking-widest">Lead Architect</span> <div class="mt-2 flex items-center justify-center gap-1.5 pt-2 border-t border-white/10 w-full"> <div class="h-1 w-1 bg-emerald-500 rounded-full animate-pulse"></div> <span class="text-[8px] font-black uppercase text-slate-400">Node Sync Active</span> </div> </div> </div> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
