Component:
Free Footer Business Dark
Tailwind
Tailwind
React
Vue
Svelte
Astro
Colors:
Description:
This carefully crafted Footer component is perfect for Business landing pages, featuring a Dark design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@type: Footer
@industry: Business
@style: Dark
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;500;800&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
color: #e5e5e5;
background-color: #0a0a0a;
background-image:
radial-gradient(at 0% 0%, hsla(84, 81%, 44%, 0.15) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsla(152, 77%, 37%, 0.15) 0px, transparent 50%),
radial-gradient(at 50% 100%, hsla(0, 0%, 5%, 1) 0px, transparent 80%);
}
body:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: contrast(150%) brightness(1000%);
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.02;
}
.glass-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
}
</style>
<footer class="relative z-10 border-t backdrop-blur overflow-hidden">
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[1000px] h-[300px] bg-green-500/10 blur-[120px] -z-10 rounded-full"></div>
<div class="max-w-[1400px] mx-auto px-10 py-20">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-8">
<div class="lg:col-span-5 space-y-8">
<div class="flex items-center space-x-3 group cursor-pointer">
<div class="relative">
<div class="w-10 h-10 bg-lime-400 rounded-full blur-md opacity-20 group-hover:opacity-60 transition-opacity">
</div>
<div class="absolute inset-0 w-10 h-10 border-2 border-lime-400/50 rounded-full flex items-center justify-center">
<div class="w-4 h-4 bg-lime-400 rounded-sm rotate-45"></div>
</div>
</div>
<span class="text-2xl font-extrabold tracking-tighter text-white">ELEV8</span>
</div>
<p class="text-neutral-400 text-lg leading-relaxed max-w-md font-light">
We don't just build tools; we engineer <span class="text-white font-medium">autonomous legacies</span>. Join
the 0.1% of enterprises operating at the speed of neural computation.
</p>
<div class="flex gap-4">
<a href="#"
class="w-10 h-10 glass-card rounded-full flex items-center justify-center hover:border-lime-500/50 transition-colors group">
<svg class="w-5 h-5 text-neutral-400 group-hover:text-lime-400" 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="w-10 h-10 glass-card rounded-full flex items-center justify-center hover:border-lime-500/50 transition-colors group">
<svg class="w-5 h-5 text-neutral-400 group-hover:text-lime-400" fill="currentColor" viewBox="0 0 24 24">
<path
d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.999v-3c0-1.105-.895-2-2-2s-2 .895-2 2v3h-2v-6h2v1.061c.611-.812 1.623-1.061 2.5-1.061 1.933 0 3.499 1.567 3.499 3.5v2.5z" />
</svg>
</a>
</div>
</div>
<div class="lg:col-span-7 grid grid-cols-2 md:grid-cols-3 gap-12">
<div class="space-y-6">
<h4 class="text-white font-bold uppercase text-xs tracking-[0.2em]">Architecture</h4>
<ul class="space-y-4">
<li><a href="#" class="text-neutral-500 hover:text-lime-400 transition-colors text-sm font-medium">Neural
Engine</a></li>
<li><a href="#" class="text-neutral-500 hover:text-lime-400 transition-colors text-sm font-medium">Liquidity
Protocol</a></li>
<li><a href="#"
class="text-neutral-500 hover:text-lime-400 transition-colors text-sm font-medium">Autonomous Nodes</a>
</li>
<li><a href="#" class="text-neutral-500 hover:text-lime-400 transition-colors text-sm font-medium">Growth
Vaults</a></li>
</ul>
</div>
<div class="space-y-6">
<h4 class="text-white font-bold uppercase text-xs tracking-[0.2em]">Intelligence</h4>
<ul class="space-y-4">
<li><a href="#" class="text-neutral-500 hover:text-lime-400 transition-colors text-sm font-medium">2026
Roadmap</a></li>
<li><a href="#" class="text-neutral-500 hover:text-lime-400 transition-colors text-sm font-medium">Case
Studies</a></li>
<li><a href="#" class="text-neutral-500 hover:text-lime-400 transition-colors text-sm font-medium">The
Transition</a></li>
<li><a href="#" class="text-neutral-500 hover:text-lime-400 transition-colors text-sm font-medium">API
Portal</a></li>
</ul>
</div>
<div class="col-span-2 md:col-span-1 space-y-6">
<h4 class="text-white font-bold uppercase text-xs tracking-[0.2em]">Newsletter</h4>
<div class="relative group">
<input type="email" placeholder="[email protected]"
class="w-full bg-neutral-900/50 border border-neutral-800 rounded-xl py-3 px-4 text-sm text-white focus:outline-none focus:border-lime-500/50 transition-all">
<button
class="absolute right-2 top-1/2 -translate-y-1/2 bg-white text-black p-1.5 rounded-lg hover:bg-lime-400 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
</div>
<p class="text-[10px] text-neutral-600 uppercase leading-relaxed tracking-wider">
Weekly insights into <br> high-yield automation.
</p>
</div>
</div>
</div>
<div class="mt-20 pt-8 border-t border-neutral-400/10 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="text-[10px] text-neutral-600 font-bold uppercase tracking-widest">
© 2026 Gradient Systems. All Rights Reserved.
</div>
<div class="flex gap-8">
<a href="#"
class="text-[10px] text-neutral-600 hover:text-white transition-colors uppercase font-bold tracking-widest">Privacy
Protocol</a>
<a href="#"
class="text-[10px] text-neutral-600 hover:text-white transition-colors uppercase font-bold tracking-widest">Service
Terms</a>
<a href="#"
class="text-[10px] text-neutral-600 hover:text-white transition-colors uppercase font-bold tracking-widest">System
Status</a>
</div>
</div>
</div>
</footer>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page