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 Placeholder</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-8 bg-white p-12 rounded-[3.5rem] shadow-4xl border border-white"> <!-- Initials with Gradient --> <div class="relative group"> <div class="absolute -inset-1 bg-linear-to-r from-emerald-400 to-cyan-500 rounded-full blur-lg opacity-20 group-hover:opacity-60 transition-opacity"></div> <div class="relative h-20 w-20 rounded-full bg-linear-to-br from-emerald-500 to-cyan-600 flex items-center justify-center border-4 border-white shadow-xl"> <span class="text-2xl font-black text-white italic tracking-tighter">AS.</span> </div> </div> <!-- Solid Background --> <div class="h-16 w-16 rounded-full bg-slate-900 flex items-center justify-center border-2 border-white shadow-lg"> <span class="text-base font-black text-white uppercase tracking-[0.2em] italic">MB</span> </div> <!-- User Icon Placeholder --> <div class="h-16 w-16 rounded-full bg-slate-100 flex items-center justify-center border-2 border-slate-200 shadow-inner group overflow-hidden hover:bg-indigo-50 transition-colors"> <svg class="h-8 w-8 text-slate-300 group-hover:text-indigo-400 transition-colors" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/> </svg> </div> <!-- Subtle Initial --> <div class="h-12 w-12 rounded-full bg-indigo-50 flex items-center justify-center border border-indigo-100"> <span class="text-xs font-black text-indigo-600 uppercase tracking-widest italic">Z</span> </div> <!-- Skeleton Loop --> <div class="h-12 w-12 rounded-full bg-slate-100 animate-pulse relative overflow-hidden"> <div class="absolute inset-0 bg-linear-to-r from-transparent via-white/50 to-transparent -translate-x-full animate-[shimmer_2s_infinite]"></div> </div> </div> <style> @keyframes shimmer { 100% { transform: translateX(100%); } } </style> </body> </html>
