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 Status</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 flex-wrap items-center justify-center gap-12 bg-white p-12 rounded-[3.5rem] shadow-4xl border border-white"> <!-- Online --> <div class="relative"> <div class="h-20 w-20 rounded-full border-2 border-slate-100 p-1 relative"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=120&h=120&fit=crop" class="h-full w-full rounded-full object-cover"> <span class="absolute bottom-1 right-1 h-5 w-5 bg-emerald-500 border-4 border-white rounded-full shadow-sm"></span> </div> <p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] font-black text-emerald-600 uppercase tracking-widest italic">Syncing</p> </div> <!-- Busy --> <div class="relative"> <div class="h-20 w-20 rounded-full border-2 border-slate-100 p-1 relative"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&h=120&fit=crop" class="h-full w-full rounded-full object-cover"> <span class="absolute bottom-1 right-1 h-5 w-5 bg-rose-500 border-4 border-white rounded-full shadow-sm animate-pulse"></span> </div> <p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] font-black text-rose-600 uppercase tracking-widest italic">Encrypted</p> </div> <!-- Away --> <div class="relative"> <div class="h-20 w-20 rounded-full border-2 border-slate-100 p-1 relative"> <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=120&h=120&fit=crop" class="h-full w-full rounded-full object-cover"> <span class="absolute bottom-1 right-1 h-5 w-5 bg-amber-500 border-4 border-white rounded-full shadow-sm"></span> </div> <p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] font-black text-amber-600 uppercase tracking-widest italic">Standby</p> </div> <!-- Offline --> <div class="relative"> <div class="h-20 w-20 rounded-full border-2 border-slate-100 p-1 relative grayscale"> <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?w=120&h=120&fit=crop" class="h-full w-full rounded-full object-cover"> <span class="absolute bottom-1 right-1 h-5 w-5 bg-slate-300 border-4 border-white rounded-full shadow-sm"></span> </div> <p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] font-black text-slate-400 uppercase tracking-widest italic">Purged</p> </div> </div> </body> </html>
