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 Author Box</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center items-center min-h-screen p-6 antialiased"> <div class="max-w-2xl w-full bg-white p-12 rounded-[4rem] shadow-4xl border border-white relative overflow-hidden group"> <!-- Decorative Background --> <div class="absolute -top-20 -right-20 h-64 w-64 bg-indigo-50 rounded-full blur-3xl opacity-50 group-hover:opacity-100 transition-opacity"></div> <div class="relative flex flex-col md:flex-row gap-10 items-center md:items-start text-center md:text-left"> <!-- Author Image --> <div class="shrink-0"> <div class="h-32 w-32 rounded-[2.5rem] bg-indigo-100 p-1 border border-indigo-200 shadow-xl shadow-indigo-100"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=300&h=300&fit=crop" class="h-full w-full object-cover rounded-[2.2rem]"> </div> <div class="mt-6 flex justify-center md:justify-start gap-3"> <a href="#" class="h-10 w-10 bg-slate-50 rounded-xl flex items-center justify-center text-slate-400 hover:bg-slate-900 hover:text-white transition-all cursor-pointer"> <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg> </a> <a href="#" class="h-10 w-10 bg-slate-50 rounded-xl flex items-center justify-center text-slate-400 hover:bg-slate-900 hover:text-white transition-all cursor-pointer"> <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg> </a> </div> </div> <!-- Author Info --> <div class="space-y-6"> <div> <p class="text-[10px] font-black text-indigo-600 uppercase tracking-[0.4em] mb-1">Author Manifest</p> <h3 class="text-3xl font-black text-slate-900 tracking-tight">Sarah Jenkins</h3> <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mt-1">Senior Protocol Architect</p> </div> <p class="text-slate-500 text-lg leading-relaxed">Specializing in sub-cycle kinetic handshakes and distributed cluster authorization formats. Over 12 years of experience architecting neural meshes for the Vanguard global network.</p> <div class="pt-6 border-t border-slate-50 flex flex-wrap justify-center md:justify-start gap-4"> <span class="px-4 py-1.5 bg-slate-50 text-slate-900 text-[10px] font-black uppercase tracking-widest rounded-lg border border-slate-100">Neural Sync</span> <span class="px-4 py-1.5 bg-slate-50 text-slate-900 text-[10px] font-black uppercase tracking-widest rounded-lg border border-slate-100">Quantum Logic</span> <span class="px-4 py-1.5 bg-slate-50 text-slate-900 text-[10px] font-black uppercase tracking-widest rounded-lg border border-slate-100">Cluster Security</span> </div> </div> </div> </div> </body> </html>
