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 Hero Content Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 antialiased font-medium text-slate-500"> <!-- Navigation Overlay --> <nav class="absolute top-0 inset-x-0 h-24 z-50 flex items-center justify-between px-8 text-white"> <div class="text-xl font-black uppercase tracking-tighter">Vanguard</div> <div class="hidden md:flex gap-8 text-[10px] font-black uppercase tracking-[0.2em]"> <a href="#" class="hover:text-indigo-300 transition-colors">Platform</a> <a href="#" class="hover:text-indigo-300 transition-colors">Architecture</a> <a href="#" class="hover:text-indigo-300 transition-colors">Manifesto</a> </div> <div class="flex items-center gap-4 text-[10px] font-black uppercase tracking-[0.2em]"> <a href="#" class="hidden md:block">Terminal</a> <a href="#" class="bg-white text-slate-900 px-6 py-2.5 rounded-full hover:bg-indigo-600 hover:text-white transition-all shadow-xl">Handshake</a> </div> </nav> <!-- Hero Section (Full Width, Large Height) --> <section class="relative bg-slate-900 pt-48 pb-64 overflow-hidden flex flex-col items-center justify-center text-center px-6"> <!-- Abstract Background --> <div class="absolute inset-0 z-0"> <div class="absolute top-0 right-1/4 w-[60rem] h-[60rem] bg-indigo-600/20 mix-blend-screen rounded-full blur-[100px] -translate-y-1/2"></div> <div class="absolute bottom-0 left-1/4 w-[40rem] h-[40rem] bg-rose-500/10 mix-blend-screen rounded-full blur-[80px] translate-y-1/3"></div> <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDIiLz4KPC9zdmc+')] opacity-20 mask-image:linear-gradient(to_bottom,white,transparent)"></div> </div> <div class="relative z-10 max-w-4xl space-y-8"> <span class="inline-block px-4 py-1.5 rounded-full border border-indigo-500/30 bg-indigo-500/10 text-indigo-300 text-[10px] font-black uppercase tracking-[0.2em]">Vanguard Protocol v4.0 Active</span> <h1 class="text-6xl md:text-8xl font-black tracking-tighter leading-[0.9] text-white"> Architect the <br class="hidden md:block"> <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-rose-400">Sovereign Mesh.</span> </h1> <p class="text-xl md:text-2xl text-slate-300 leading-relaxed font-light italic max-w-2xl mx-auto"> Decentralized kinetic routing across multiple geographic sectors. Seamless integration, absolute zero latency. </p> </div> </section> <!-- Negative Margin Content Wrap --> <main class="relative z-20 max-w-6xl mx-auto px-6 -mt-32 pb-32 space-y-12"> <!-- Hero Overlap Card --> <div class="bg-white rounded-[4rem] p-12 lg:p-20 shadow-2xl shadow-slate-900/10 border border-slate-100 flex flex-col md:flex-row gap-16 item-center justify-between"> <div class="space-y-6 max-w-lg"> <div class="h-16 w-16 bg-indigo-600 rounded-[2rem] flex items-center justify-center text-white shadow-lg shadow-indigo-600/30"> <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg> </div> <h2 class="text-4xl font-black text-slate-900 tracking-tight leading-none">Instant Node Provisioning</h2> <p class="text-lg leading-relaxed">Instantiate new spectral layers within milliseconds. Our distributed ledger guarantees synchronization without traditional database overhead.</p> <div class="pt-4"> <a href="#" class="inline-flex items-center gap-4 text-xs font-black uppercase tracking-[0.2em] text-indigo-600 hover:text-indigo-800 transition-colors group"> Explore Architecture <span class="h-8 w-8 bg-indigo-50 rounded-full flex items-center justify-center group-hover:translate-x-2 transition-transform"> → </span> </a> </div> </div> <div class="relative flex-1 w-full bg-slate-50 border border-dashed border-slate-200 rounded-[3rem] h-80 flex items-center justify-center text-slate-300 font-mono text-[9px] uppercase tracking-widest overflow-hidden"> <div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-indigo-400 via-transparent to-transparent"></div> Simulated UI Interface </div> </div> <!-- Secondary Content Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pt-12 text-left"> <div class="bg-white p-12 rounded-[3.5rem] border border-slate-100 shadow-sm space-y-6 hover:shadow-xl transition-shadow duration-300"> <div class="text-[9px] font-black uppercase tracking-[0.4em] text-indigo-600 mb-2">Metrics</div> <h3 class="text-2xl font-black text-slate-900 tracking-tight leading-none">Deep Packet Inspection</h3> <p class="text-sm leading-relaxed">Native analysis of incoming vectors against global threat patterns.</p> </div> <div class="bg-white p-12 rounded-[3.5rem] border border-slate-100 shadow-sm space-y-6 hover:shadow-xl transition-shadow duration-300"> <div class="text-[9px] font-black uppercase tracking-[0.4em] text-indigo-600 mb-2">Consensus</div> <h3 class="text-2xl font-black text-slate-900 tracking-tight leading-none">Multi-Node Verification</h3> <p class="text-sm leading-relaxed">No single point of failure. Every manifest is checked against a rotating quorum.</p> </div> <div class="bg-white p-12 rounded-[3.5rem] border border-slate-100 shadow-sm space-y-6 hover:shadow-xl transition-shadow duration-300 md:col-span-2 lg:col-span-1"> <div class="text-[9px] font-black uppercase tracking-[0.4em] text-slate-400 mb-2">Registry</div> <h3 class="text-2xl font-black text-slate-900 tracking-tight leading-none">Immutable Logs</h3> <p class="text-sm leading-relaxed">Append-only architecture ensuring historical integrity for all structural changes.</p> </div> </div> </main> <footer class="bg-slate-900 text-white py-12 text-center text-[10px] font-black uppercase tracking-[0.4em] text-slate-600"> © 2026 Vanguard Mesh Collective </footer> </body> </html>
