Modern Responsive Website Footer Design with Tailwind CSS in web design trends

Looking for a sleek, responsive, and user-friendly footer design for your website? This article showcases a fully customizable Tailwind CSS footer built for performance, usability, and modern aesthetics. Ideal for startups, portfolios, or business sites — plug it into your project and elevate your site’s experience instantly.

Aditya upadhyay

6/16/20253 min read

This is the latest footer design I’ve been building for you all — crafted with care to be clean, modern, and fully responsive across every device. Whether you're a startup, freelancer, or business owner looking to make a bold digital statement, this footer brings not just good looks but strategic functionality. Every section — from the Maclister branding, to essential quick links, the email newsletter form, and crisp social media icons — has been intentionally laid out to enhance usability, user trust, and aesthetic appeal.

The codebase is powered by Tailwind CSS, giving you full control over customization without clutter. It’s mobile-first, loads fast, and is easy to plug into any modern web project. Subtle hover animations, clean layouts, and accessibility-friendly interactions are baked right in. Whether your visitors are browsing from a phone, tablet, or desktop — this footer maintains a sleek, professional vibe that elevates your brand presence

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Maclister Footer</title>


<!-- Tailwind CSS CDN -->

<script src="https://cdn.tailwindcss.com"></script>


<!-- Font Awesome for Social Icons -->

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>


<!-- Tailwind Config for Custom Colors -->

<script>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#1f2937', // dark slate

accent: '#22d3ee', // cyan-400

hoverAccent: '#06b6d4', // cyan-500

soft: '#e0f2fe', // sky-100

}

}

}

}

</script>


<style>

.footer-hover:hover {

transform: translateY(-2px) scale(1.03);

transition: all 0.3s ease-in-out;

}

input:focus {

outline: 2px solid #06b6d4;

}

</style>

</head>

<body class="bg-gray-50 text-gray-800">


<!-- FOOTER -->

<footer class="bg-primary text-white py-12 px-6 md:px-20">

<div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10">

<!-- Branding -->

<div>

<h2 class="text-3xl font-extrabold text-white">Maclister</h2>

<p class="mt-4 text-sm text-gray-300 leading-relaxed">Crafting modern web experiences. Turning

digital dreams into reality, one project at a time.</p>

</div>


<!-- Quick Links -->

<div>

<h3 class="text-xl font-semibold mb-4 text-white">Explore</h3>

<ul class="space-y-2 text-sm text-gray-300">

<li><a href="#" class="hover:text-accent transition-all">Home</a></li>

<li><a href="#" class="hover:text-accent transition-all">Themes</a></li>

<li><a href="#" class="hover:text-accent transition-all">About Us</a></li>

<li><a href="#" class="hover:text-accent transition-all">Support</a></li>

</ul>

</div>


<!-- Newsletter -->

<div>

<h3 class="text-xl font-semibold mb-4 text-white">Newsletter</h3>

<p class="text-sm text-gray-300 mb-3">Stay in the loop with the latest design trends and updates.</p>

<form class="flex flex-col sm:flex-row gap-3" onsubmit="subscribe(event)">

<input id="emailInput" type="email" required placeholder="you@example.com"

class="px-3 py-2 rounded w-full sm:w-auto text-gray-800 focus:outline-none">

<button type="submit" class="bg-accent hover:bg-hoverAccent px-4 py-2 rounded text-white footer-

hover">Subscribe</button>

</form>

<p id="subscribeMsg" class="text-sm text-green-400 mt-2 hidden">You're subscribed! 🎉</p>

</div>


<!-- Social Media -->

<div>

<h3 class="text-xl font-semibold mb-4 text-white">Connect</h3>

<div class="flex gap-4 text-2xl text-gray-300">

<a href="#" class="hover:text-accent transition" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>

<a href="#" class="hover:text-accent transition" aria-label="Twitter"><i class="fab fa-twitter"></i></a>

<a href="#" class="hover:text-accent transition" aria-label="Instagram"><i class="fab fa-instagram"></i></a>

<a href="#" class="hover:text-accent transition" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>

</div>

</div>

</div>


<!-- Divider -->

<div class="border-t border-gray-700 mt-12 pt-6 text-center text-sm text-gray-400">

© 2025 <strong>Maclister</strong>. Designed with ❤️ in India. All rights reserved.

</div>

</footer>


<!-- JavaScript -->

<script>

function subscribe(event) {

event.preventDefault();

const emailInput = document.getElementById('emailInput');

const message = document.getElementById('subscribeMsg');


if (emailInput.value.trim()) {

message.classList.remove('hidden');

emailInput.value = '';

}

}

</script>

</body>

</html>

💡 How to Use This Footer:

  1. Copy the entire HTML code into the bottom of your webpage — ideally right before the closing </body> tag.

  2. Make sure the Tailwind CSS CDN and Font Awesome CDN scripts are loaded in your <head>.

  3. Update the text, links, and social media URLs with your own content.

  4. The newsletter form is ready to capture emails — you can link it to your email marketing service like Mailchimp, ConvertKit, or simply collect emails using a custom backend script.

  5. Customize the colors or fonts easily by tweaking the Tailwind utility classes or extending Tailwind's config.

This footer is part of a larger design system I'm building under the Maclister brand — a vision to help creators and businesses build beautiful, high-performance web experiences effortlessly. Feel free to use it, remix it, or build upon it for your own projects. And as always — pixel perfection is the goal. Let’s keep designing forward.