Component:
Footer SaaS Minimal
Colors:
Description:
This carefully crafted Footer component is perfect for SaaS landing pages, featuring a Minimal 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: SaaS
@style: Minimal
@category: Page Section, Navigation, Contact
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
}
/* 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";
}
/* Component Styles */
.footer-section {
background-color: var(--color-white);
padding: 3rem 1rem;
border-top: 1px solid var(--color-gray-200);
}
.footer-container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
/* Company Info */
.company-info {
margin-bottom: 1.5rem;
}
.logo-div {
display: flex;
align-items: center;
text-decoration: none;
margin-bottom: 1.5rem;
}
.logo-icon {
height: 2rem;
width: auto;
color: var(--color-blue-600);
}
.logo-text {
margin-left: 0.5rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-gray-900);
}
.company-description {
color: var(--color-gray-600);
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-link {
color: var(--color-gray-400);
transition: color 0.2s;
}
.social-link:hover {
color: var(--color-gray-600);
}
.social-icon {
height: 1.25rem;
width: 1.25rem;
}
/* Navigation Links */
.footer-nav h3 {
color: var(--color-gray-900);
font-weight: 600;
margin-bottom: 1rem;
font-size: 1rem;
}
.footer-nav ul {
list-style: none;
}
.footer-nav li {
margin-bottom: 0.75rem;
}
.footer-nav a {
color: var(--color-gray-600);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s;
}
.footer-nav a:hover {
color: var(--color-blue-600);
}
/* Newsletter Form */
.newsletter {
margin-bottom: 1.5rem;
}
.newsletter h3 {
color: var(--color-gray-900);
font-weight: 600;
margin-bottom: 1rem;
font-size: 1rem;
}
.newsletter p {
color: var(--color-gray-600);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.newsletter-input {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
border: 1px solid var(--color-gray-300);
border-radius: 0.25rem;
transition: all 0.2s;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-blue-500);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.newsletter-button {
width: 100%;
background-color: var(--color-blue-600);
color: var(--color-white);
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.2s;
}
.newsletter-button:hover {
background-color: var(--color-blue-700);
}
.newsletter-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
}
/* Bottom Bar */
.bottom-bar {
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid var(--color-gray-200);
}
.bottom-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.legal-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.legal-link {
color: var(--color-gray-600);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s;
}
.legal-link:hover {
color: var(--color-blue-600);
}
.copyright {
color: var(--color-gray-600);
font-size: 0.875rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.footer-container {
padding: 0 1.5rem;
}
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.bottom-container {
flex-direction: row;
justify-content: space-between;
gap: 0;
}
.legal-links {
justify-content: flex-start;
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.footer-container {
padding: 0 2rem;
}
}
</style>
<section class="footer-section" aria-label="Footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-grid">
<!-- Company Info -->
<div class="company-info">
<!-- Logo -->
<div class="logo-div" aria-label="Homepage">
<svg class="logo-icon" 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="logo-text">CloudFlow</span>
</div>
<p class="company-description">
Empowering teams with intelligent workflow automation. Transform your business processes with our cutting-edge SaaS platform.
</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Visit our Twitter">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a href="#" class="social-link" aria-label="Visit our LinkedIn">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Visit our GitHub">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<!-- Product Links -->
<nav class="footer-nav">
<h3>Product</h3>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Integrations</a></li>
<li><a href="#">Enterprise</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</nav>
<!-- Company Links -->
<nav class="footer-nav">
<h3>Company</h3>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Press</a></li>
</ul>
</nav>
<!-- Newsletter Signup -->
<div class="newsletter">
<h3>Stay Updated</h3>
<p>Subscribe to our newsletter for product updates, industry insights, and company news.</p>
<form class="newsletter-form">
<div>
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="newsletter-input" placeholder="Enter your email">
</div>
<button type="submit" class="newsletter-button">
Subscribe
</button>
</form>
</div>
</div>
<!-- Bottom Bar -->
<div class="bottom-bar">
<div class="bottom-container">
<div class="legal-links">
<a href="#" class="legal-link">Terms</a>
<a href="#" class="legal-link">Privacy</a>
<a href="#" class="legal-link">Cookies</a>
<a href="#" class="legal-link">Security</a>
</div>
<p class="copyright">
© 2025 CloudFlow. All rights reserved.
</p>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('h3').forEach(header => {
if (!header.hasAttribute('aria-expanded')) {
header.setAttribute('aria-expanded', 'true');
}
});
});
</script>
<!--
@type: Footer
@industry: SaaS
@style: Minimal
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 border-t border-gray-200" aria-label="Footer">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Main Footer Content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 mb-12">
<!-- Company Info -->
<div class="col-span-1 lg:col-span-1">
<!-- Logo -->
<div class="flex-shrink-0 mb-6">
<a href="#" class="flex items-center" aria-label="Homepage">
<svg class="h-8 w-auto text-blue-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="ml-2 text-xl font-semibold text-gray-900">CloudFlow</span>
</a>
</div>
<p class="text-gray-600 text-sm mb-6">
Empowering teams with intelligent workflow automation. Transform your business processes with our cutting-edge SaaS platform.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600 transition-colors" aria-label="Visit our Twitter">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-600 transition-colors" aria-label="Visit our LinkedIn">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-600 transition-colors" aria-label="Visit our GitHub">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<!-- Product Links -->
<div class="col-span-1">
<h3 class="text-gray-900 font-semibold mb-4">Product</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Features</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Integrations</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Enterprise</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Solutions</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Tutorials</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Pricing</a></li>
</ul>
</div>
<!-- Company Links -->
<div class="col-span-1">
<h3 class="text-gray-900 font-semibold mb-4">Company</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">About us</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Careers</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Partners</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Blog</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Press</a></li>
</ul>
</div>
<!-- Newsletter Signup -->
<div class="col-span-1">
<h3 class="text-gray-900 font-semibold mb-4">Stay Updated</h3>
<p class="text-sm text-gray-600 mb-4">Subscribe to our newsletter for product updates, industry insights, and company news.</p>
<form class="space-y-3">
<div>
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-3 py-2 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your email">
</div>
<button type="submit" class="w-full bg-blue-600 text-white px-4 py-2 text-sm font-medium rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
Subscribe
</button>
</form>
</div>
</div>
<!-- Bottom Bar -->
<div class="pt-8 mt-8 border-t border-gray-200">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="flex flex-wrap justify-center md:justify-start space-x-6 text-sm text-gray-600">
<a href="#" class="hover:text-blue-600">Terms</a>
<a href="#" class="hover:text-blue-600">Privacy</a>
<a href="#" class="hover:text-blue-600">Cookies</a>
<a href="#" class="hover:text-blue-600">Security</a>
</div>
<p class="text-sm text-gray-600">
© 2025 CloudFlow. All rights reserved.
</p>
</div>
</div>
</div>
</section>
<!-- Simple dropdown functionality for mobile menu -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add aria-expanded attribute to all h3 elements
document.querySelectorAll('h3').forEach(header => {
if (!header.hasAttribute('aria-expanded')) {
header.setAttribute('aria-expanded', 'true');
}
});
});
</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