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 Multi Column 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-20 pb-12 text-slate-400"> <div class="max-w-7xl mx-auto px-6"> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-12 lg:gap-8 mb-16"> <!-- Brand --> <div class="col-span-2 lg:col-span-2 space-y-6"> <div class="flex items-center gap-3"> <div class="h-10 w-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-indigo-900/50"> <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="M13 10V3L4 14h7v7l9-11h-7z" /></svg> </div> <span class="text-2xl font-black text-white tracking-tighter">Vanguard</span> </div> <p class="text-sm leading-relaxed max-w-xs"> Next-generation neural synchronization for distributed systems. Scale your logic across every regional sector with absolute integrity. </p> </div> <!-- Links 1 --> <div class="space-y-6"> <h4 class="text-xs font-bold text-white uppercase tracking-widest">Protocol</h4> <ul class="space-y-4"> <li><a href="#" class="text-sm hover:text-white transition-colors">Manifest Sync</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Neural Handshake</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Cluster Static</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Sovereign Logic</a></li> </ul> </div> <!-- Links 2 --> <div class="space-y-6"> <h4 class="text-xs font-bold text-white uppercase tracking-widest">Resources</h4> <ul class="space-y-4"> <li><a href="#" class="text-sm hover:text-white transition-colors">Documentation</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Sector Logs</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Sync Audits</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">API Core</a></li> </ul> </div> <!-- Links 3 --> <div class="space-y-6"> <h4 class="text-xs font-bold text-white uppercase tracking-widest">Company</h4> <ul class="space-y-4"> <li><a href="#" class="text-sm hover:text-white transition-colors">About</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Infrastructure</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Status</a></li> <li><a href="#" class="text-sm hover:text-white transition-colors">Contact</a></li> </ul> </div> </div> <div class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-8"> <p class="text-[11px] font-bold uppercase tracking-widest text-slate-600"> © 2026 Vanguard Logic. Verified Mesh Protocol. </p> <div class="flex gap-6"> <a href="#" class="text-xs font-bold hover:text-white transition-colors uppercase tracking-widest">Privacy Policy</a> <a href="#" class="text-xs font-bold hover:text-white transition-colors uppercase tracking-widest">Terms of Service</a> </div> </div> </div> </footer> </body> </html>
