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 Blog Hero Section</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 min-h-screen antialiased"> <section class="relative w-full h-[80vh] min-h-[600px] flex items-center justify-center overflow-hidden"> <!-- Background Base --> <div class="absolute inset-0 bg-slate-900"> <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=100" class="h-full w-full object-cover opacity-40"> <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/60 to-transparent"></div> </div> <!-- Decorative Elements --> <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] bg-indigo-500/10 rounded-full blur-[120px]"></div> <!-- Content Container --> <div class="relative max-w-7xl mx-auto px-6 text-center space-y-10"> <div class="flex flex-col items-center space-y-6"> <span class="px-5 py-2 bg-indigo-600/20 backdrop-blur-md border border-indigo-500/30 text-indigo-300 text-[10px] font-black uppercase tracking-[0.4em] rounded-full">Primary Insight</span> <h1 class="text-5xl md:text-7xl lg:text-8xl font-black text-white tracking-tighter leading-[0.9] max-w-5xl">Architecting the Global Sync Mesh</h1> <p class="text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">A comprehensive exploration of self-correcting protocol sets and their impact on distributed cluster logic integrity.</p> </div> <div class="flex flex-col md:flex-row items-center justify-center gap-8 pt-6"> <div class="flex items-center gap-4"> <div class="h-14 w-14 rounded-2xl bg-white/10 backdrop-blur p-1 ring-1 ring-white/20"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop" class="h-full w-full object-cover rounded-xl"> </div> <div class="text-left"> <p class="text-sm font-bold text-white leading-tight">Sarah Jenkins</p> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">Senior Architect</p> </div> </div> <div class="h-12 w-px bg-white/10 hidden md:block"></div> <div class="flex flex-col items-start md:items-center gap-1.5 text-left md:text-center text-[10px] font-black text-slate-400 uppercase tracking-widest"> <p>Deployment Date</p> <p class="text-indigo-400">March 12, 2026</p> </div> </div> <div class="pt-10"> <button class="px-10 py-5 bg-white text-slate-900 rounded-2xl text-[11px] font-black uppercase tracking-[0.3em] hover:bg-indigo-600 hover:text-white transition-all shadow-2xl shadow-indigo-500/20 cursor-pointer">Initialize Reading Sequence</button> </div> </div> <!-- Scroll Indicator --> <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-4"> <span class="text-[9px] font-black text-slate-500 uppercase tracking-[0.4em] rotate-180 [writing-mode:vertical-lr]">Scroll</span> <div class="h-12 w-px bg-gradient-to-t from-indigo-500 to-transparent"></div> </div> </section> </body> </html>
