Component:
Footer Software Minimal
Colors:
Description:
This carefully crafted Footer component is perfect for Software 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: Software
@style: Minimal
@category: Navigation, Page Section, Contact
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-100: #f3f4f6;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
}
* {
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";
}
.footer-section {
background-color: var(--color-white);
border-top: 1px solid var(--color-gray-100);
}
.container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.footer-content {
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 768px) {
.footer-content {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
@media (min-width: 1024px) {
.footer-content {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.top-section {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 4rem;
}
@media (min-width: 1024px) {
.top-section {
grid-template-columns: repeat(12, 1fr);
}
}
.company-info {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.company-info {
grid-column: span 4 / span 4;
}
}
.logo-container {
display: flex;
align-items: center;
}
.logo-icon {
height: 2rem;
width: auto;
color: var(--color-indigo-500);
}
.logo-text {
margin-left: 0.5rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-gray-900);
}
.company-description {
margin-top: 1rem;
font-size: 1rem;
color: var(--color-gray-500);
max-width: 20rem;
}
.footer-social-links {
margin-top: 1.5rem;
display: flex;
gap: 1.5rem;
}
.footer-social-link {
color: var(--color-gray-400);
transition: color 0.2s;
}
.footer-social-link:hover {
color: var(--color-gray-500);
}
.footer-social-icon {
height: 1.25rem;
width: 1.25rem;
}
.newsletter {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.newsletter {
grid-column: span 5 / span 5;
grid-column-start: 8;
}
}
.newsletter-title {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-900);
}
.newsletter-description {
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
.newsletter-form {
margin-top: 1rem;
display: flex;
flex-direction: column;
max-width: 28rem;
}
@media (min-width: 640px) {
.newsletter-form {
flex-direction: row;
}
}
.newsletter-input {
appearance: none;
min-width: 0;
width: 100%;
background-color: var(--color-white);
border: 1px solid var(--color-gray-300);
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
padding: 0.5rem 1rem;
font-size: 1rem;
color: var(--color-gray-900);
}
.newsletter-input::placeholder {
color: var(--color-gray-500);
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-indigo-500);
box-shadow: 0 0 0 2px var(--color-indigo-500);
}
.newsletter-input:focus::placeholder {
color: var(--color-gray-400);
}
.newsletter-button-container {
margin-top: 0.75rem;
}
@media (min-width: 640px) {
.newsletter-button-container {
margin-top: 0;
margin-left: 0.75rem;
flex-shrink: 0;
}
}
.newsletter-button {
width: 100%;
background-color: var(--color-indigo-600);
border: 1px solid transparent;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
transition: background-color 0.2s;
cursor: pointer;
}
.newsletter-button:hover {
background-color: var(--color-indigo-700);
}
.newsletter-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.newsletter-disclaimer {
margin-top: 0.75rem;
font-size: 0.75rem;
color: var(--color-gray-500);
}
.nav-sections {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
padding-bottom: 3rem;
border-bottom: 1px solid var(--color-gray-100);
}
@media (min-width: 768px) {
.nav-sections {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.nav-sections {
grid-template-columns: repeat(5, 1fr);
}
}
.nav-section-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gray-500);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer-nav-list {
margin-top: 1rem;
list-style: none;
}
.footer-nav-item {
margin-top: 0.75rem;
}
.footer-nav-item:first-child {
margin-top: 0;
}
.footer-nav-link {
font-size: 1rem;
color: var(--color-gray-600);
text-decoration: none;
transition: color 0.2s;
}
.footer-nav-link:hover {
color: var(--color-indigo-600);
}
.bottom-section {
padding-top: 2rem;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.bottom-section {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.contact-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
@media (min-width: 768px) {
.contact-info {
flex-direction: row;
gap: 2rem;
}
}
.contact-item {
display: flex;
align-items: center;
}
.contact-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-gray-400);
margin-right: 0.5rem;
}
.copyright {
margin-top: 2rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
@media (min-width: 768px) {
.copyright {
margin-top: 0;
}
}
</style>
<section class="footer-section" aria-labelledby="footer-heading">
<div class="container">
<div class="footer-content">
<!-- Top section with logo and newsletter -->
<div class="top-section">
<!-- Logo and company info -->
<div class="company-info">
<div class="logo-container">
<svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 2L4.094 6.938C3.432 7.294 3 7.978 3 8.72V15.28C3 16.022 3.432 16.706 4.094 17.062L13 22L21.906 17.062C22.568 16.706 23 16.022 23 15.28V8.72C23 7.978 22.568 7.294 21.906 6.938L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 7L13 12L23 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 12V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="logo-text">DevStack</span>
</div>
<p class="company-description">
Streamlining business operations for small businesses with powerful, easy-to-use software solutions.
</p>
<div class="footer-social-links">
<a href="#" class="footer-social-link" aria-label="Facebook">
<svg class="footer-social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="footer-social-link" aria-label="Twitter">
<svg class="footer-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" />
</svg>
</a>
<a href="#" class="footer-social-link" aria-label="LinkedIn">
<svg class="footer-social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" 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" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- Newsletter -->
<div class="newsletter">
<h3 class="newsletter-title">Subscribe to our newsletter</h3>
<p class="newsletter-description">
Get the latest updates, tips, and product news delivered straight to your inbox.
</p>
<form class="newsletter-form">
<input type="email" name="email-address" id="email-address" autocomplete="email" required class="newsletter-input" placeholder="Enter your email">
<div class="newsletter-button-container">
<button type="submit" class="newsletter-button">
Subscribe
</button>
</div>
</form>
<p class="newsletter-disclaimer">
By subscribing, you agree to our Privacy Policy and consent to receive updates from our company.
</p>
</div>
</div>
<!-- Navigation sections -->
<div class="nav-sections">
<!-- Products -->
<div>
<h3 class="nav-section-title">
Products
</h3>
<ul role="list" class="footer-nav-list">
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Business Suite
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Client Manager
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Finance Tools
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Project Tracker
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Reporting
</a>
</li>
</ul>
</div>
<!-- Solutions -->
<div>
<h3 class="nav-section-title">
Solutions
</h3>
<ul role="list" class="footer-nav-list">
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
For Startups
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
For Small Business
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
For Agencies
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
For E-commerce
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Enterprise
</a>
</li>
</ul>
</div>
<!-- Resources -->
<div>
<h3 class="nav-section-title">
Resources
</h3>
<ul role="list" class="footer-nav-list">
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Documentation
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Guides
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
API Reference
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Blog
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Community
</a>
</li>
</ul>
</div>
<!-- Company -->
<div>
<h3 class="nav-section-title">
Company
</h3>
<ul role="list" class="footer-nav-list">
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
About Us
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Careers
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Press
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Partners
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Contact
</a>
</li>
</ul>
</div>
<!-- Legal -->
<div>
<h3 class="nav-section-title">
Legal
</h3>
<ul role="list" class="footer-nav-list">
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Privacy Policy
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Terms of Service
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Cookie Policy
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
GDPR Compliance
</a>
</li>
<li class="footer-nav-item">
<a href="#" class="footer-nav-link">
Security
</a>
</li>
</ul>
</div>
</div>
<!-- Bottom section with copyright and contact -->
<div class="bottom-section">
<!-- Contact info -->
<div class="contact-info">
<div class="contact-item">
<svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" 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>
<span>[email protected]</span>
</div>
<div class="contact-item">
<svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" 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>
<span>+1 (555) 123-4567</span>
</div>
<div class="contact-item">
<svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" 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>123 Business Ave, Suite 100, San Francisco, CA 94107</span>
</div>
</div>
<!-- Copyright -->
<p class="copyright">
© 2025 DevStack, Inc. All rights reserved.
</p>
</div>
</div>
</div>
</section>
<!--
@type: Footer
@industry: Software
@style: Minimal
@category: Navigation, Page Section, Contact
@framework: Tailwind
@license: Free
-->
<section class="bg-white border-t border-gray-100" aria-labelledby="footer-heading">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="py-12 md:py-16 lg:py-20">
<!-- Top section with logo and newsletter -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16">
<!-- Logo and company info -->
<div class="lg:col-span-4">
<div class="flex items-center">
<svg class="h-8 w-auto text-indigo-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 2L4.094 6.938C3.432 7.294 3 7.978 3 8.72V15.28C3 16.022 3.432 16.706 4.094 17.062L13 22L21.906 17.062C22.568 16.706 23 16.022 23 15.28V8.72C23 7.978 22.568 7.294 21.906 6.938L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 7L13 12L23 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 12V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="ml-2 text-xl font-semibold text-gray-900">DevStack</span>
</div>
<p class="mt-4 text-base text-gray-500 max-w-xs">
Streamlining business operations for small businesses with powerful, easy-to-use software solutions.
</p>
<div class="mt-6 flex space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-500" aria-label="Facebook">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500" aria-label="Twitter">
<span class="sr-only">Twitter</span>
<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" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500" aria-label="LinkedIn">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" 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" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- Newsletter -->
<div class="lg:col-span-5 lg:col-start-8">
<h3 class="text-base font-medium text-gray-900">Subscribe to our newsletter</h3>
<p class="mt-2 text-sm text-gray-500">
Get the latest updates, tips, and product news delivered straight to your inbox.
</p>
<form class="mt-4 sm:flex sm:max-w-md">
<label for="email-address" class="sr-only">Email address</label>
<input type="email" name="email-address" id="email-address" autocomplete="email" required class="appearance-none min-w-0 w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:placeholder-gray-400" placeholder="Enter your email">
<div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button type="submit" class="w-full bg-indigo-600 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Subscribe
</button>
</div>
</form>
<p class="mt-3 text-xs text-gray-500">
By subscribing, you agree to our Privacy Policy and consent to receive updates from our company.
</p>
</div>
</div>
<!-- Navigation sections -->
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 pb-12 border-b border-gray-100">
<!-- Products -->
<div>
<h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
Products
</h3>
<ul role="list" class="mt-4 space-y-3">
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Business Suite
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Client Manager
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Finance Tools
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Project Tracker
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Reporting
</a>
</li>
</ul>
</div>
<!-- Solutions -->
<div>
<h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
Solutions
</h3>
<ul role="list" class="mt-4 space-y-3">
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
For Startups
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
For Small Business
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
For Agencies
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
For E-commerce
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Enterprise
</a>
</li>
</ul>
</div>
<!-- Resources -->
<div>
<h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
Resources
</h3>
<ul role="list" class="mt-4 space-y-3">
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Documentation
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Guides
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
API Reference
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Blog
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Community
</a>
</li>
</ul>
</div>
<!-- Company -->
<div>
<h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
Company
</h3>
<ul role="list" class="mt-4 space-y-3">
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
About Us
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Careers
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Press
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Partners
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Contact
</a>
</li>
</ul>
</div>
<!-- Legal -->
<div>
<h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
Legal
</h3>
<ul role="list" class="mt-4 space-y-3">
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Privacy Policy
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Terms of Service
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Cookie Policy
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
GDPR Compliance
</a>
</li>
<li>
<a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
Security
</a>
</li>
</ul>
</div>
</div>
<!-- Bottom section with copyright and contact -->
<div class="pt-8 md:flex md:items-center md:justify-between">
<!-- Contact info -->
<div class="space-y-3 md:space-y-0 md:flex md:space-x-8 text-sm text-gray-500">
<div class="flex items-center">
<svg class="h-5 w-5 text-gray-400 mr-2" xmlns="http://www.w3.org/2000/svg" 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>
<span>[email protected]</span>
</div>
<div class="flex items-center">
<svg class="h-5 w-5 text-gray-400 mr-2" xmlns="http://www.w3.org/2000/svg" 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>
<span>+1 (555) 123-4567</span>
</div>
<div class="flex items-center">
<svg class="h-5 w-5 text-gray-400 mr-2" xmlns="http://www.w3.org/2000/svg" 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>123 Business Ave, Suite 100, San Francisco, CA 94107</span>
</div>
</div>
<!-- Copyright -->
<p class="mt-8 md:mt-0 text-sm text-gray-500">
© 2025 DevStack, Inc. All rights reserved.
</p>
</div>
</div>
</div>
</section>
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