html footers
Footers
<!-- ==========================================
🔥 FOOTER 5: RAINBOW GLOW 🔥
=========================================== -->
<footer class="relative bg-gray-950 text-gray-300 pt-16 pb-8 overflow-hidden">
<!-- Animated Rainbow Top Border -->
<div class="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 animate-pulse"></div>
<div class="absolute top-0 right-0 w-full h-1.5 bg-gradient-to-r from-blue-500 via-green-500 to-purple-500 mix-blend-screen opacity-50"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col items-center text-center">
<!-- Giant Rainbow Text Logo -->
<h1 class="text-4xl md:text-5xl font-black mb-6 text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500 drop-shadow-lg cursor-pointer hover:scale-105 transition-transform duration-300">
CodeMaster
</h1>
<p class="text-gray-400 max-w-lg mb-10 text-sm md:text-base">
Unleash your creativity with components that break the boundaries of design. Terms and Privacy clearly defined, art infinitely imagined.
</p>
<!-- Links in a Line (Very modern style) -->
<div class="flex flex-wrap justify-center gap-6 md:gap-10 mb-12 font-medium text-sm text-gray-400">
<a href="#" class="hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-pink-500 hover:to-orange-400 transition-all">About Us</a>
<a href="#" class="hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-orange-400 hover:to-yellow-400 transition-all">Contact Us</a>
<a href="#" class="hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-green-400 hover:to-cyan-400 transition-all">Privacy Policy</a>
<a href="#" class="hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-cyan-400 hover:to-purple-500 transition-all">Terms of Service</a>
</div>
<!-- Big Glowing Call to Action Button in Footer -->
<a href="#" class="px-8 py-3 rounded-full bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold backdrop-blur-sm transition-all hover:border-pink-500/50 hover:shadow-[0_0_20px_rgba(236,72,153,0.3)]">
Get in Touch 🚀
</a>
</div>
<div class="mt-16 text-center">
<p class="text-xs text-gray-600 font-semibold uppercase tracking-[0.2em]">
Crafted with <span class="text-red-500">❤️</span> by CodeMaster © 2026
</p>
</div>
</div>
</footer>
Footers
<!-- ==========================================
🔥 FOOTER 4: TRUST BLUE 🔥
=========================================== -->
<footer class="bg-slate-900 text-slate-300 py-12 relative overflow-hidden">
<!-- Blue Glow Effect in Background -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-1 bg-gradient-to-r from-transparent via-blue-500 to-transparent shadow-[0_0_20px_rgba(59,130,246,0.8)]"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12">
<div class="col-span-1 sm:col-span-2 lg:col-span-1">
<div class="flex items-center gap-2 mb-4">
<div class="w-8 h-8 rounded bg-blue-600 flex items-center justify-center text-white font-bold text-lg">C</div>
<span class="text-white font-bold text-xl">CodeMaster</span>
</div>
<p class="text-sm text-slate-400 mb-6">
Delivering highly optimized and beautifully crafted web components for developers worldwide.
</p>
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-semibold flex items-center gap-1 transition-colors">
Contact Us <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
<div>
<h4 class="text-white font-semibold mb-5">Resources</h4>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-blue-400 transition-colors">Documentation</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Tutorials</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Blog</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-5">Company</h4>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-blue-400 transition-colors">About</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Partners</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-5">Legal</h4>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-blue-400 transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Terms of Service</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Security</a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-slate-800 text-center sm:text-left flex flex-col sm:flex-row justify-between items-center gap-4">
<p class="text-sm text-slate-500">© 2026 CodeMaster Inc. Secure & Encrypted.</p>
<div class="flex gap-4">
<!-- Add your tiny social SVGs here if needed -->
</div>
</div>
</div>
</footer>
Footers
<!-- ==========================================
🔥 FOOTER 3: CYBER PURPLE 🔥
=========================================== -->
<footer class="bg-gradient-to-b from-purple-900 via-purple-950 to-black text-purple-200 py-16 border-t border-purple-800/50 shadow-[0_-10px_40px_rgba(147,51,234,0.15)]">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left">
<div class="grid grid-cols-1 md:grid-cols-5 gap-10">
<div class="md:col-span-2">
<div class="inline-block p-2 bg-purple-800/30 rounded-xl border border-purple-500/30 mb-4">
<!-- Tech Logo Icon -->
<svg class="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<h2 class="text-2xl font-black text-white mb-2">CodeMaster AI</h2>
<p class="text-purple-300/80 text-sm max-w-sm mx-auto md:mx-0">
Next-generation components for modern web. Build interfaces that feel alive.
</p>
</div>
<div class="md:col-span-1">
<h3 class="text-white font-bold mb-4 tracking-wide text-sm shadow-purple-500 drop-shadow-md">NAVIGATION</h3>
<ul class="space-y-2 text-sm text-purple-300/80">
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Home</a></li>
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Pricing</a></li>
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Contact Us</a></li>
</ul>
</div>
<div class="md:col-span-1">
<h3 class="text-white font-bold mb-4 tracking-wide text-sm shadow-purple-500 drop-shadow-md">LEGAL</h3>
<ul class="space-y-2 text-sm text-purple-300/80">
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Terms of Service</a></li>
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Privacy Policy</a></li>
</ul>
</div>
<div class="md:col-span-1">
<h3 class="text-white font-bold mb-4 tracking-wide text-sm shadow-purple-500 drop-shadow-md">CONNECT</h3>
<div class="flex justify-center md:justify-start gap-4">
<a href="#" class="p-2 bg-purple-800/40 rounded-lg hover:bg-purple-600 transition-colors text-white"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557... (add full path or use standard icon)"/></svg> Twitter</a>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-purple-800/40 flex flex-col items-center">
<p class="text-xs text-purple-400/60 tracking-widest uppercase">© 2026 CodeMaster Tech. All Rights Reserved.</p>
</div>
</div>
</footer>
Footers
<!-- ==========================================
🔥 FOOTER 2: CLEAN WHITE 🔥
=========================================== -->
<footer class="bg-white border-t border-gray-100 text-gray-600 py-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-start gap-10">
<!-- Brand & Newsletter -->
<div class="md:w-1/3">
<span class="text-blue-600 font-extrabold text-3xl tracking-tighter">CodeMaster</span>
<p class="mt-4 text-gray-500 text-sm leading-relaxed">
Build your next amazing website with our copy-paste components. Subscribe to our newsletter for updates.
</p>
<div class="mt-6 flex gap-2">
<input type="email" placeholder="Enter your email" class="px-4 py-2 w-full rounded-lg border border-gray-200 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-all shadow-md">Subscribe</button>
</div>
</div>
<!-- Links Grid -->
<div class="grid grid-cols-2 sm:grid-cols-3 gap-8 md:w-2/3 md:pl-10">
<div>
<h4 class="font-bold text-gray-900 mb-4">Company</h4>
<ul class="space-y-3 text-sm font-medium text-gray-500">
<li><a href="#" class="hover:text-blue-600 transition">About Us</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Careers</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Contact Us</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Legal Info</h4>
<ul class="space-y-3 text-sm font-medium text-gray-500">
<li><a href="#" class="hover:text-blue-600 transition">Privacy Policy</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Terms of Service</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Refund Policy</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Socials</h4>
<ul class="space-y-3 text-sm font-medium text-gray-500">
<li><a href="#" class="hover:text-blue-600 transition flex items-center gap-2">Twitter ↗</a></li>
<li><a href="#" class="hover:text-blue-600 transition flex items-center gap-2">LinkedIn ↗</a></li>
<li><a href="#" class="hover:text-blue-600 transition flex items-center gap-2">Instagram ↗</a></li>
</ul>
</div>
</div>
</div>
<div class="mt-12 pt-6 border-t border-gray-100 text-center">
<p class="text-sm text-gray-400 font-medium">© 2026 CodeMaster. Crafted with passion.</p>
</div>
</div>
</footer>
Footers
<!-- ==========================================
🔥 FOOTER 1: PREMIUM BLACK 🔥
=========================================== -->
<footer class="bg-black border-t border-gray-800 text-gray-400 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Brand Section -->
<div class="col-span-1 md:col-span-1">
<span class="text-white font-extrabold text-2xl tracking-tight">CodeMaster.</span>
<p class="mt-4 text-sm text-gray-500">
Empowering developers with premium, copy-paste UI components. Build faster, build better.
</p>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-white font-semibold mb-4 uppercase tracking-wider text-sm">Product</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-white transition-colors duration-200">Components</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Templates</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Pricing</a></li>
</ul>
</div>
<!-- Support -->
<div>
<h3 class="text-white font-semibold mb-4 uppercase tracking-wider text-sm">Support</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-white transition-colors duration-200">Contact Us</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Help Center</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Community</a></li>
</ul>
</div>
<!-- Legal -->
<div>
<h3 class="text-white font-semibold mb-4 uppercase tracking-wider text-sm">Legal</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Terms of Service</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Cookie Policy</a></li>
</ul>
</div>
</div>
<!-- Bottom Section -->
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-sm">© 2026 CodeMaster. All rights reserved.</p>
<!-- Social Icons -->
<div class="flex gap-4">
<a href="#" class="hover:text-white transition-colors"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
<a href="#" class="hover:text-white transition-colors"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.373 0 12c0 5.302 3.438 9.8 8.205 11.385.6.113.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 21.795 24 17.298 24 12c0-6.627-5.373-12-12-12"/></svg></a>
</div>
</div>
</div>
</footer>
Footers
<footer class="w-full bg-gray-900 border border-gray-800 rounded-3xl p-8 flex flex-col items-center justify-center gap-6 shadow-2xl min-w-[320px] max-w-2xl mx-auto relative overflow-hidden">
<!-- Decorative background glow -->
<div class="absolute -top-10 -left-10 w-32 h-32 bg-blue-600/20 rounded-full blur-3xl"></div>
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-600/20 rounded-full blur-3xl"></div>
<h2 class="text-2xl font-bold text-white z-10">Tandav <span class="text-blue-500">Coders</span></h2>
<!-- Social Icons -->
<div class="flex gap-4 z-10">
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center text-gray-400 hover:text-[#1DA1F2] hover:border-[#1DA1F2] hover:-translate-y-2 transition-all duration-300 shadow-lg"><i class="fab fa-twitter text-lg"></i></a>
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center text-gray-400 hover:text-[#E1306C] hover:border-[#E1306C] hover:-translate-y-2 transition-all duration-300 shadow-lg"><i class="fab fa-instagram text-lg"></i></a>
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center text-gray-400 hover:text-white hover:border-gray-500 hover:-translate-y-2 transition-all duration-300 shadow-lg"><i class="fab fa-github text-lg"></i></a>
</div>
<!-- Copyright -->
<div class="w-full border-t border-gray-800 pt-6 mt-2 text-center z-10">
<p class="text-sm text-gray-500 font-medium">© 2026 Crafted with ❤️ by Mera Bhai.</p>
</div>
</footer>