Footer

This tailwind example is contributed by Maxim, on 22-Mar-2025. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 1.7k 6

<footer class="bg-black text-white pt-16 pb-8 px-6 md:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-12 lg:grid-cols-12 gap-y-12 md:gap-x-8">
            <div class="md:col-span-4 lg:col-span-6 max-w-md">
                <h3 class="text-2xl font-normal mb-6 leading-tight">Keep up to date with our quarterly newsletter,
                    "You've got mail."</h3>
                <div class="mt-4 space-y-4">
                    <input type="email" placeholder="Enter email address..." class="newsletter-input w-full px-4 py-3 bg-zinc-900 rounded text-white border border-zinc-800 focus:outline-none focus:border-zinc-700">
                    <button class="bg-white text-black px-6 py-2.5 rounded-full flex items-center font-medium hover:bg-gray-200 transition-colors">
                            Subscribe
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                </div>
            </div>
            <div class="hidden md:block md:col-span-1 lg:hidden"></div>
            <div
                class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 col-span-1 md:col-span-7 lg:col-span-6 gap-y-12 sm:gap-x-8 md:gap-x-8 lg:gap-x-10">
                <div>
                    <h3 class="text-sm font-normal uppercase tracking-wide text-gray-400 mb-5">Get in Touch</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Start a Project</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Join the Team</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Press & Media</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Drop Us a Note</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-sm font-normal uppercase tracking-wide text-gray-400 mb-5">See More</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Home</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Work</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Services</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Latest</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">About</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Careers</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Contact</a></li>
                    </ul>
                </div>
                <div class="sm:col-span-2 md:col-span-1 lg:col-span-1">
                    <h3 class="text-sm font-normal uppercase tracking-wide text-gray-400 mb-5">Follow Us</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Instagram</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">LinkedIn</a></li>
                        <li><a href="#" class="text-sm hover:text-gray-300 transition-colors">Twitter</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="mt-16 pt-6 border-t border-zinc-800">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="flex space-x-6 mb-4 md:mb-0">
                    <a href="#" class="text-xs text-gray-500 hover:text-gray-300">Sitemap</a>
                    <a href="#" class="text-xs text-gray-500 hover:text-gray-300">Privacy Policy</a>
                </div>
                <div class="text-xs text-gray-500">
                    © 2025, Site. All Rights Reserved.
                </div>
            </div>
        </div>
    </div>
</footer>

Related Examples

Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Abdul Jabbar Al Nahid

1 year ago

1.3k
SaaS Footer
SaaS footer built with pure HTML and Tailwind CSS

JUGENDRA GANGWAR

2 months ago

106
Creative with CTA buttons
Use Below tailwind css footer example with CTA buttons and site links.

Pagedone

2 years ago

2.8k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

2 months ago

382
Five columns with subscribe button
This example of tailwind css footer can be used if you want five columns in your footer with brand logo, sitemap links, description and social media account with additional subscibe button to connect with your website.

Pagedone

2 years ago

3.2k
Dark Footer with subscribe form
Use below exmaple of Tailwind CSS Dark Footer with Newsletter Subscription Form with brand logo and site links.

Pagedone

2 years ago

3.4k
Footer, TailwindFlex v2
Another footer version of tailwindflex.com Example users randomly picked: Samuel & Prajwal

Matti

1 year ago

1.4k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Ron Hicks

4 years ago

12.2k
Standard footer
You can use this example for five column footer with social media accounts, sitemap links, copyright notice and brand logo.

Pagedone

2 years ago

3.5k
Dark Footer with newsletter
Use Following Footer for dark vsersion of your website with newsletter, social icons and site links.

Pagedone

2 years ago

3.4k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Abdul Jabbar Al Nahid

1 year ago

908
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Nicole Shalom

1 year ago

1.8k