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 Circle</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"> <!-- Extra Large --> <div class="relative group"> <div class="absolute -inset-1 bg-linear-to-r from-indigo-500 to-purple-500 rounded-full blur-xl opacity-0 group-hover:opacity-40 transition-opacity duration-500"></div> <div class="h-24 w-24 rounded-full border-4 border-white shadow-xl overflow-hidden relative"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop" class="h-full w-full object-cover"> </div> </div> <!-- Large --> <div class="h-16 w-16 rounded-full border-2 border-white shadow-lg overflow-hidden ring-2 ring-slate-100"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop" class="h-full w-full object-cover"> </div> <!-- Medium --> <div class="h-12 w-12 rounded-full shadow-md overflow-hidden ring-2 ring-indigo-500 ring-offset-2"> <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&h=100&fit=crop" class="h-full w-full object-cover"> </div> <!-- Small --> <div class="h-8 w-8 rounded-full border border-slate-200 shadow-sm overflow-hidden bg-slate-100"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60&h=60&fit=crop" class="h-full w-full object-cover"> </div> <!-- Extra Small --> <div class="h-6 w-6 rounded-full border border-white shadow-xs overflow-hidden"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop" class="h-full w-full object-cover"> </div> </div> </body> </html>
