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 Stack</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-col items-center gap-12 bg-white p-12 rounded-[3.5rem] shadow-4xl border border-white"> <div class="text-center"> <span class="text-[10px] font-black text-indigo-400 uppercase tracking-widest italic">Security Tier</span> <h2 class="text-xl font-black text-slate-900 tracking-tighter mt-1 italic">Manifest Access Stack</h2> </div> <div class="flex flex-col -space-y-6"> <!-- Primary Account --> <div class="relative group z-30"> <div class="absolute -inset-1 bg-linear-to-r from-indigo-500 via-purple-500 to-rose-500 rounded-full blur-lg opacity-0 group-hover:opacity-40 transition-opacity duration-500"></div> <div class="relative h-20 w-20 rounded-full border-4 border-white shadow-2xl overflow-hidden ring-4 ring-indigo-50"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=120&h=120&fit=crop" class="h-full w-full object-cover"> </div> <div class="absolute -top-2 -right-2 h-8 w-8 bg-black border-4 border-white rounded-full flex items-center justify-center text-white"> <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L1 21h22L12 2zm0 3.99L19.53 19H4.47L12 5.99zM11 16h2v2h-2v-2zm0-7h2v5h-2V9z"/></svg> </div> </div> <!-- Secondary Account --> <div class="relative h-16 w-16 mx-auto rounded-full border-2 border-white shadow-xl overflow-hidden z-20 grayscale opacity-60 hover:opacity-100 hover:grayscale-0 transition-all cursor-pointer"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" class="h-full w-full object-cover"> </div> <!-- Tertiary Account --> <div class="relative h-12 w-12 mx-auto rounded-full border-2 border-white shadow-xl overflow-hidden z-10 grayscale opacity-30 hover:opacity-100 hover:grayscale-0 transition-all cursor-pointer"> <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop" class="h-full w-full object-cover"> </div> </div> <p class="text-[9px] font-bold text-slate-400 uppercase tracking-[0.2em] italic">Authorized Entities Only.</p> </div> </body> </html>
