Component:
Footer Business Modern
Colors:
Description:
This carefully crafted Footer component is perfect for Business 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: Business
@style: Modern
@category: Page Section, Navigation, Contact
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-600: #4f46e5;
--container-padding: 1rem;
--grid-gap: 2rem;
--transition-duration: 0.2s;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Container */
.footer-container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* Footer Section */
.footer {
background-color: var(--color-slate-50);
color: var(--color-slate-900);
padding-top: 4rem;
padding-bottom: 2rem;
border-top: 1px solid var(--color-slate-200);
}
/* Grid Layout */
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--grid-gap);
margin-bottom: 3rem;
}
/* Company Info */
.company-info {
margin-bottom: 1.5rem;
}
.logo-wrapper {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.logo {
height: 2rem;
width: auto;
color: var(--color-indigo-600);
}
.company-name {
font-size: 1.25rem;
font-weight: 700;
margin-left: 0.5rem;
}
.company-description {
color: var(--color-slate-600);
margin-bottom: 1.5rem;
}
/* Social Links */
.social-links {
display: flex;
gap: 1rem;
}
.social-link {
color: var(--color-slate-600);
transition: color var(--transition-duration);
}
.social-link:hover {
color: var(--color-indigo-600);
}
.social-icon {
height: 1.5rem;
width: 1.5rem;
}
/* Footer Sections */
.footer-section h3 {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-link {
color: var(--color-slate-600);
text-decoration: none;
transition: color var(--transition-duration);
}
.footer-link:hover {
color: var(--color-indigo-600);
}
/* Contact Info */
.contact-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-item {
display: flex;
align-items: flex-start;
}
.contact-icon {
height: 1.5rem;
width: 1.5rem;
color: var(--color-indigo-600);
margin-right: 0.75rem;
margin-top: 0.125rem;
}
/* Bottom Footer */
.bottom-footer {
border-top: 1px solid var(--color-slate-200);
padding-top: 2rem;
}
.bottom-footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.copyright {
color: var(--color-slate-600);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.legal-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem 1rem;
font-size: 0.875rem;
}
/* Responsive Breakpoints */
@media (min-width: 768px) {
.container {
padding: 0 2rem;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.bottom-footer-content {
flex-direction: row;
justify-content: space-between;
}
.copyright {
margin-bottom: 0;
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
<section class="footer">
<div class="footer-container">
<!-- Footer main content -->
<div class="footer-grid">
<!-- Company info -->
<div class="footer-section">
<div class="logo-wrapper">
<svg class="logo" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="company-name">BusinessGo</span>
</div>
<p class="company-description">Transforming businesses with innovative solutions since 2010. We help companies scale efficiently and sustainably.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Visit our Facebook page">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
</svg>
</a>
<a href="#" class="social-link" aria-label="Visit our Twitter page">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" 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="social-link" aria-label="Visit our LinkedIn page">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
</svg>
</a>
<a href="#" class="social-link" aria-label="Visit our Instagram page">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
</a>
</div>
</div>
<!-- Quick links -->
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#" class="footer-link">About Us</a></li>
<li><a href="#" class="footer-link">Our Services</a></li>
<li><a href="#" class="footer-link">Case Studies</a></li>
<li><a href="#" class="footer-link">Testimonials</a></li>
<li><a href="#" class="footer-link">Our Team</a></li>
<li><a href="#" class="footer-link">Careers</a></li>
</ul>
</div>
<!-- Services -->
<div class="footer-section">
<h3>Our Services</h3>
<ul class="footer-links">
<li><a href="#" class="footer-link">Business Consulting</a></li>
<li><a href="#" class="footer-link">Strategic Planning</a></li>
<li><a href="#" class="footer-link">Market Research</a></li>
<li><a href="#" class="footer-link">Financial Analysis</a></li>
<li><a href="#" class="footer-link">Process Optimization</a></li>
<li><a href="#" class="footer-link">Executive Coaching</a></li>
</ul>
</div>
<!-- Contact info -->
<div class="footer-section">
<h3>Contact Us</h3>
<div class="contact-info">
<div class="contact-item">
<svg xmlns="http://www.w3.org/2000/svg" class="contact-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span class="footer-link">123 Business Avenue<br>New York, NY 10001</span>
</div>
<div class="contact-item">
<svg xmlns="http://www.w3.org/2000/svg" class="contact-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<a href="mailto:[email protected]" class="footer-link">[email protected]</a>
</div>
<div class="contact-item">
<svg xmlns="http://www.w3.org/2000/svg" class="contact-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<a href="tel:+12125551234" class="footer-link">+1 (212) 555-1234</a>
</div>
</div>
</div>
</div>
<!-- Bottom footer -->
<div class="bottom-footer">
<div class="bottom-footer-content">
<div class="copyright">
© 2025 BusinessGo. All rights reserved.
</div>
<div class="legal-links">
<a href="#" class="footer-link">Terms of Service</a>
<a href="#" class="footer-link">Privacy Policy</a>
<a href="#" class="footer-link">Cookie Policy</a>
<a href="#" class="footer-link">Sitemap</a>
</div>
</div>
</div>
</div>
</section>
<script>
// This script is only for accessibility improvements and minimal interactions
document.addEventListener('DOMContentLoaded', function() {
// Add keyboard navigation support for footer links
const footerLinks = document.querySelectorAll('.footer-link');
footerLinks.forEach(link => {
link.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
this.click();
}
});
});
});
</script>
<!--
@type: Footer
@industry: Business
@style: Modern
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 text-slate-900 pt-16 pb-8 font-sans border-t border-slate-200">
<div class="container mx-auto px-4 md:px-8">
<!-- Footer main content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<!-- Company info -->
<div>
<div class="flex items-center mb-6">
<svg class="h-8 w-auto text-indigo-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-xl font-bold ml-2">BusinessGo</span>
</div>
<p class="text-slate-600 mb-6">Transforming businesses with innovative solutions since 2010. We help companies scale efficiently and sustainably.</p>
<div class="flex space-x-4">
<a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors" aria-label="Visit our Facebook page">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
</svg>
</a>
<a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors" aria-label="Visit our Twitter page">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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="text-slate-600 hover:text-indigo-600 transition-colors" aria-label="Visit our LinkedIn page">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
</svg>
</a>
<a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors" aria-label="Visit our Instagram page">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
</a>
</div>
</div>
<!-- Quick links -->
<div>
<h3 class="text-lg font-bold mb-6">Quick Links</h3>
<ul class="space-y-4">
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">About Us</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Our Services</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Case Studies</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Testimonials</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Our Team</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Careers</a></li>
</ul>
</div>
<!-- Services -->
<div>
<h3 class="text-lg font-bold mb-6">Our Services</h3>
<ul class="space-y-4">
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Business Consulting</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Strategic Planning</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Market Research</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Financial Analysis</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Process Optimization</a></li>
<li><a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors">Executive Coaching</a></li>
</ul>
</div>
<!-- Contact info -->
<div>
<h3 class="text-lg font-bold mb-6">Contact Us</h3>
<div class="space-y-4">
<div class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span class="text-slate-600">123 Business Avenue<br>New York, NY 10001</span>
</div>
<div class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<a href="mailto:[email protected]" class="text-slate-600 hover:text-indigo-600 transition-colors">[email protected]</a>
</div>
<div class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<a href="tel:+12125551234" class="text-slate-600 hover:text-indigo-600 transition-colors">+1 (212) 555-1234</a>
</div>
</div>
</div>
</div>
<!-- Bottom footer -->
<div class="border-t border-slate-200 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-slate-600 text-sm mb-4 md:mb-0">
© 2025 BusinessGo. All rights reserved.
</div>
<div class="flex flex-wrap justify-center gap-x-8 gap-y-2 text-sm text-slate-600">
<a href="#" class="hover:text-indigo-600 transition-colors">Terms of Service</a>
<a href="#" class="hover:text-indigo-600 transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-indigo-600 transition-colors">Cookie Policy</a>
<a href="#" class="hover:text-indigo-600 transition-colors">Sitemap</a>
</div>
</div>
</div>
</div>
</section>
<script>
// This script is only for accessibility improvements and minimal interactions
document.addEventListener('DOMContentLoaded', function() {
// Add keyboard navigation support for footer links
const footerLinks = document.querySelectorAll('footer a');
footerLinks.forEach(link => {
link.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
this.click();
}
});
});
});
</script>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS 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