Component:
Free Footer Technology Modern
Tailwind
Tailwind
React
Vue
Svelte
Astro
Colors:
Description:
This carefully crafted Footer component is perfect for Technology landing pages, featuring a Modern 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: Technology
@style: Modern
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<style>
.gradient-text {
background: linear-gradient(135deg, #f59e0b, #d97706);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.social-link {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.social-link:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.3), transparent);
transition: left 0.5s ease;
}
.social-link:hover::before {
left: 100%;
}
.footer-link {
transition: all 0.3s ease;
position: relative;
}
.footer-link:after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background: linear-gradient(90deg, #f59e0b, #d97706);
transition: width 0.3s ease;
}
.footer-link:hover::after {
width: 100%;
}
</style>
<footer class="bg-gradient-to-b from-neutral-900 to-neutral-800 text-white relative border-t border-amber-500/10">
<!-- Main Footer -->
<div class="max-w-7xl mx-auto px-6 lg:px-8 py-16">
<!-- Main Footer Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
<!-- Company Info Section -->
<div class="lg:col-span-1 space-y-6">
<div class="flex items-center space-x-3">
<div class="relative">
<div
class="w-12 h-12 bg-gradient-to-r from-amber-500 to-amber-600 rounded-xl flex items-center justify-center">
<svg class="w-7 h-7 text-neutral-900" 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>
</div>
<div>
<h3 class="text-2xl font-bold gradient-text">TechFlow</h3>
<p class="text-sm text-neutral-400">Innovation Hub</p>
</div>
</div>
<p class="text-neutral-300 leading-relaxed">
Empowering businesses with cutting-edge technology solutions that drive innovation and accelerate digital
transformation.
</p>
<!-- Social Links -->
<div class="flex space-x-4">
<a href="#"
class="social-link w-10 h-10 bg-neutral-800/50 hover:bg-amber-500/20 border border-neutral-700/50 hover:border-amber-500/50 rounded-xl flex items-center justify-center transition-all duration-300">
<svg class="w-5 h-5 text-neutral-400 hover:text-amber-400" fill="currentColor" viewBox="0 0 24 24">
<path
d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z" />
</svg>
</a>
<a href="#"
class="social-link w-10 h-10 bg-neutral-800/50 hover:bg-amber-500/20 border border-neutral-700/50 hover:border-amber-500/50 rounded-xl flex items-center justify-center transition-all duration-300">
<svg class="w-5 h-5 text-neutral-400 hover:text-amber-400" fill="currentColor" viewBox="0 0 24 24">
<path
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
</svg>
</a>
<a href="#"
class="social-link w-10 h-10 bg-neutral-800/50 hover:bg-amber-500/20 border border-neutral-700/50 hover:border-amber-500/50 rounded-xl flex items-center justify-center transition-all duration-300">
<svg class="w-5 h-5 text-neutral-400 hover:text-amber-400" fill="currentColor" viewBox="0 0 24 24">
<path
d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.042-3.441.219-.937 1.404-5.965 1.404-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.562-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.888-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.357-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z" />
</svg>
</a>
</div>
</div>
<!-- Products Section -->
<div class="space-y-6">
<h4 class="text-lg font-semibold text-amber-400 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
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">
</path>
</svg>
Products
</h4>
<ul class="space-y-3">
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Cloud Platform</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">AI Solutions</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Data Analytics</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Security Suite</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">API Gateway</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">DevOps Tools</a></li>
</ul>
</div>
<!-- Company Section -->
<div class="space-y-6">
<h4 class="text-lg font-semibold text-amber-400 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
</path>
</svg>
Company
</h4>
<ul class="space-y-3">
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">About Us</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Careers</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">News & Blog</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Press Kit</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Partners</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Contact</a></li>
</ul>
</div>
<!-- Resources & Newsletter -->
<div class="space-y-6">
<h4 class="text-lg font-semibold text-amber-400 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
</path>
</svg>
Resources
</h4>
<ul class="space-y-3">
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Documentation</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Help Center</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Community</a></li>
<li><a href="#" class="footer-link block max-w-fit text-neutral-300 hover:text-amber-400">Status Page</a></li>
</ul>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="bg-neutral-800 border-t border-neutral-700/30">
<div class="max-w-7xl mx-auto px-6 lg:px-8 py-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
<div class="flex flex-col md:flex-row items-center md:items-start space-y-2 md:space-y-0 md:space-x-6">
<p class="text-sm text-neutral-400">
© 2025 TechFlow. All rights reserved.
</p>
<div class="flex items-center space-x-1">
<div class="w-2 h-2 bg-green-500 rounded-full pulse-dot"></div>
<span class="text-xs text-neutral-500">All systems operational</span>
</div>
</div>
<div class="flex flex-col md:flex-row items-center justify-end space-y-2 md:space-y-0 md:space-x-6 text-sm">
<nav class="flex space-x-6">
<a href="#" class="footer-link text-neutral-400 hover:text-amber-400">Privacy Policy</a>
<a href="#" class="footer-link text-neutral-400 hover:text-amber-400">Terms of Service</a>
<a href="#" class="footer-link text-neutral-400 hover:text-amber-400">Cookie Policy</a>
</nav>
</div>
</div>
</div>
</div>
</footer>
<script>
// Add hover effects to social links
document.querySelectorAll('.social-link').forEach(link => {
link.addEventListener('mouseenter', () => {
link.style.transform = 'translateY(-2px) scale(1.05)';
});
link.addEventListener('mouseleave', () => {
link.style.transform = 'translateY(0) scale(1)';
});
});
</script>
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