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 Large Website Footer</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex items-end min-h-screen antialiased"> <footer class="w-full bg-slate-900 pt-24 pb-12 text-slate-400"> <div class="max-w-7xl mx-auto px-6"> <!-- Top Section --> <div class="flex flex-col lg:flex-row justify-between gap-16 pb-20 border-b border-white/5"> <!-- Brand & About --> <div class="space-y-8 max-w-sm"> <div class="flex items-center gap-3"> <div class="h-10 w-10 bg-linear-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white shadow-xl"> <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.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg> </div> <span class="text-2xl font-black text-white tracking-tighter">Vanguard.</span> </div> <p class="text-sm leading-relaxed"> The global leader in neural manifest synchronization. We provide the infrastructure for cross-sector logic distribution with 0ms downtime. </p> <div class="flex gap-4"> <a href="#" class="h-10 w-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-all"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12a12 12 0 008.19 11.378c.6.11.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> </a> <a href="#" class="h-10 w-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-all"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> </a> </div> </div> <!-- Quick Links Grid --> <div class="flex-1 grid grid-cols-2 sm:grid-cols-3 gap-12 lg:pl-12"> <div class="space-y-6"> <h4 class="text-xs font-bold text-white uppercase tracking-widest leading-none">Products</h4> <ul class="space-y-4"> <li><a href="#" class="text-sm hover:text-white transition-colors">Neural Sync</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Sovereign Pro</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Sector Hub</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Manifest CLI</a></li> </ul> </div> <div class="space-y-6"> <h4 class="text-xs font-bold text-white uppercase tracking-widest leading-none">Deployment</h4> <ul class="space-y-4"> <li><a href="#" class="text-sm hover:text-white transition-colors">Cloud Mesh</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Edge Nodes</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Self-Hosted</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Hybrid Core</a></li> </ul> </div> <div class="space-y-6"> <h4 class="text-xs font-bold text-white uppercase tracking-widest leading-none">Developer</h4> <ul class="space-y-4"> <li><a href="#" class="text-sm hover:text-white transition-colors">API Keys</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Integrations</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Benchmarks</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Status Core</a></li> </ul> </div> </div> </div> <!-- Mid Section: Status & Newsletter --> <div class="py-12 flex flex-col xl:flex-row items-center justify-between gap-12 border-b border-white/5"> <div class="flex flex-wrap justify-center gap-10"> <div class="flex items-center gap-3"> <div class="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></div> <span class="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Global Sync: Operational</span> </div> <div class="flex items-center gap-3"> <div class="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></div> <span class="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Neural Latency: 0.4ms</span> </div> </div> <div class="flex-1 max-w-lg w-full"> <form class="flex gap-2"> <input type="text" placeholder="Updates for your sector..." class="flex-1 bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all font-medium"> <button class="px-6 py-3 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-slate-900 transition-all cursor-pointer"> Sync </button> </form> </div> </div> <!-- Bottom Section --> <div class="pt-12 text-center sm:text-left flex flex-col sm:flex-row justify-between items-center gap-8"> <p class="text-[11px] font-medium text-slate-600 uppercase tracking-widest"> © 2026 Vanguard Logic. Decentralized Synchronization Protocols. </p> <div class="flex flex-wrap justify-center gap-8"> <a href="#" class="text-[10px] font-bold uppercase tracking-widest hover:text-white transition-colors">Safety</a> <a href="#" class="text-[10px] font-bold uppercase tracking-widest hover:text-white transition-colors">Compliance</a> <a href="#" class="text-[10px] font-bold uppercase tracking-widest hover:text-white transition-colors">SLA</a> </div> </div> </div> </footer> </body> </html>
