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 Landing Page Sections Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex flex-col min-h-screen antialiased text-slate-500 font-medium"> <header class="h-20 bg-white border-b border-slate-100 flex items-center justify-between px-8 md:px-16 sticky top-0 z-50"> <div class="text-xl font-black text-slate-900 tracking-tighter uppercase">Vanguard.AI</div> <div class="flex items-center gap-6"> <a href="#" class="text-[10px] font-black uppercase tracking-[0.2em] hover:text-indigo-600 transition-colors hidden sm:block">Log In</a> <button class="px-6 py-2.5 bg-slate-900 text-white rounded-full text-[10px] font-black uppercase tracking-widest shadow-xl shadow-slate-900/10 hover:bg-indigo-600 transition-colors">Start Free</button> </div> </header> <!-- Hero Section --> <section class="py-24 md:py-32 xl:py-48 px-6 text-center max-w-5xl mx-auto space-y-12"> <span class="inline-block border border-slate-200 bg-white rounded-full px-4 py-1.5 text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none shadow-sm">AI-Driven Optimization</span> <h1 class="text-5xl md:text-7xl font-black text-slate-900 tracking-tighter leading-[0.9]"> Automate your <br class="hidden md:block"> spectral <span class="italic text-indigo-600">workflows</span> </h1> <p class="text-xl leading-relaxed max-w-2xl mx-auto">Vanguard learns your routing patterns to eliminate latency and predict mesh failure before it happens across your distributed hubs.</p> <div class="flex flex-wrap justify-center items-center gap-6 pt-6"> <button class="px-10 py-5 bg-indigo-600 text-white rounded-[2rem] text-xs font-black uppercase tracking-[0.2em] hover:scale-105 transition-transform shadow-2xl shadow-indigo-600/30">Connect Hub</button> <button class="px-10 py-5 bg-white border-2 border-slate-100 text-slate-900 rounded-[2rem] text-xs font-black uppercase tracking-[0.2em] hover:border-slate-300 transition-colors shadow-sm">View Demo</button> </div> </section> <!-- Split Feature 1 --> <section class="py-24 bg-white border-y border-slate-100 px-6"> <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div class="order-2 lg:order-1 h-[30rem] bg-indigo-50 border border-indigo-100 rounded-[4rem] relative overflow-hidden flex items-center justify-center p-12"> <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-indigo-100/50 to-transparent"></div> <!-- Mock UI --> <div class="w-full h-full bg-white rounded-3xl shadow-2xl border border-indigo-100 flex flex-col relative z-10 overflow-hidden text-left"> <div class="h-12 border-b border-indigo-50 flex items-center px-6 gap-2 shrink-0"> <div class="h-3 w-3 rounded-full bg-rose-400"></div><div class="h-3 w-3 rounded-full bg-amber-400"></div><div class="h-3 w-3 rounded-full bg-emerald-400"></div> </div> <div class="p-8 space-y-4"> <div class="h-4 w-1/3 bg-slate-100 rounded"></div> <div class="h-4 w-2/3 bg-indigo-50 rounded"></div> <div class="h-10 w-full bg-slate-50 mt-6 rounded-lg border border-slate-100"></div> </div> </div> </div> <div class="order-1 lg:order-2 space-y-6"> <span class="text-[10px] font-black uppercase tracking-[0.4em] text-indigo-600">Adaptive Routing</span> <h2 class="text-4xl md:text-5xl font-black text-slate-900 tracking-tighter leading-none">Smart Node Balancing</h2> <p class="text-lg leading-relaxed">Stop manually shifting traffic. Our AI adjusts packet routes dynamically based on real-time sector congestion and latency spikes.</p> <ul class="space-y-4 pt-4"> <li class="flex items-center gap-3 text-slate-700 font-bold text-sm"> <svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Sub-millisecond reaction time </li> <li class="flex items-center gap-3 text-slate-700 font-bold text-sm"> <svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Automated geo-fencing policies </li> </ul> </div> </div> </section> <!-- Split Feature 2 (Reversed) --> <section class="py-24 bg-gray-50 px-6"> <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div class="space-y-6 lg:pl-12"> <span class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400">Predictive Defense</span> <h2 class="text-4xl md:text-5xl font-black text-slate-900 tracking-tighter leading-none">Pre-emptive Shields</h2> <p class="text-lg leading-relaxed">Our models constantly scan the global registry for anomaly patterns, shielding your specific nodes before distributed attacks reach the edge.</p> <button class="mt-4 px-8 py-4 border-2 border-slate-200 text-slate-900 rounded-2xl text-[10px] uppercase font-black tracking-widest hover:border-indigo-600 transition-colors">See Security Manifest</button> </div> <div class="h-[30rem] bg-slate-900 rounded-[4rem] flex items-center justify-center p-12 overflow-hidden relative shadow-xl"> <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:4rem_4rem]"></div> <div class="relative z-10"> <div class="absolute inset-0 bg-indigo-500 rounded-full blur-[80px] animate-pulse"></div> <div class="h-32 w-32 border border-indigo-400 bg-slate-800 rounded-full flex items-center justify-center shadow-[0_0_50px_rgba(99,102,241,0.5)]"> <svg class="h-10 w-10 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> </div> </div> </div> </div> </section> <!-- Grid of Smaller Features --> <section class="py-32 bg-slate-900 text-white px-6"> <div class="max-w-6xl mx-auto space-y-24"> <div class="text-center space-y-6 max-w-2xl mx-auto"> <h2 class="text-4xl md:text-5xl font-black tracking-tighter leading-none">Comprehensive Tooling</h2> <p class="text-slate-400 text-lg font-normal">Everything required to maintain sovereign data mesh clusters without manual oversight.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-12 text-left"> <div class="space-y-4"> <div class="h-12 w-12 bg-indigo-600/20 rounded-2xl flex items-center justify-center text-indigo-400 border border-indigo-500/20"><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" /></svg></div> <h3 class="text-xl font-black tracking-tight">Identity Provisioning</h3> <p class="text-sm text-slate-400 font-normal leading-relaxed">Instantly verify new node entries into the cluster using multi-stage handshake algorithms.</p> </div> <div class="space-y-4"> <div class="h-12 w-12 bg-white/5 rounded-2xl flex items-center justify-center text-white border border-white/10"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg></div> <h3 class="text-xl font-black tracking-tight">Analytics Sync</h3> <p class="text-sm text-slate-400 font-normal leading-relaxed">Centralize log structures from asynchronous components perfectly within milliseconds.</p> </div> <div class="space-y-4"> <div class="h-12 w-12 bg-white/5 rounded-2xl flex items-center justify-center text-white border border-white/10"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" /></svg></div> <h3 class="text-xl font-black tracking-tight">Immutability Logs</h3> <p class="text-sm text-slate-400 font-normal leading-relaxed">Keep an append-only registry of all administrative decisions for strict compliance reporting.</p> </div> </div> </div> </section> <!-- CTA Section --> <section class="py-32 px-6"> <div class="max-w-4xl mx-auto bg-indigo-600 rounded-[4rem] p-16 md:p-24 text-center text-white shadow-2xl shadow-indigo-600/20 relative overflow-hidden group"> <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.2)_0%,transparent_50%)]"></div> <div class="relative z-10 space-y-8"> <h2 class="text-5xl font-black tracking-tighter leading-none">Ready to deploy?</h2> <p class="text-lg text-indigo-200 font-normal max-w-lg mx-auto">Vanguard is fundamentally transforming the way distributed nodes achieve consensus.</p> <div class="pt-8"> <button class="bg-white text-indigo-900 px-10 py-5 rounded-[2rem] font-black uppercase tracking-[0.2em] text-xs hover:scale-105 transition-transform shadow-xl">Start Building Today</button> </div> </div> </div> </section> </body> </html>
