Footer

Footer with responsive desing

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Rajesh Maheshwari

1.3k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<body class="bg-black flex flex-col min-h-screen">

<footer class="bg-white shadow-lg mt-auto">
        <div class="max-w-7xl mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            
            
            <div>
                <h3 class="text-xl font-semibold text-gray-800">Company</h3>
                <p class="text-gray-500 mt-3">Delivering quality products with a seamless shopping experience.</p>
                <p class="text-gray-500 mt-2">© 2024 All rights reserved.</p>
            </div>

<div>
                <h3 class="text-xl font-semibold text-gray-800">Quick Links</h3>
                <ul class="mt-3 space-y-2">
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Home</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Shop</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">About Us</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Contact</a></li>
                </ul>
            </div>

<div>
                <h3 class="text-xl font-semibold text-gray-800">Customer Service</h3>
                <ul class="mt-3 space-y-2">
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">FAQs</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Shipping & Returns</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Privacy Policy</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Terms & Conditions</a></li>
                </ul>
            </div>

<div>
                <h3 class="text-xl font-semibold text-gray-800">Stay Updated</h3>
                <p class="text-gray-500 mt-3">Subscribe to our newsletter for exclusive deals and updates.</p>
                <div class="mt-4 flex">
                    <input type="email" placeholder="Enter your email" class="w-full px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-1">
                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 rounded-r-lg transition">
                        Subscribe
                    </button>
                </div>
            </div>
            
        </div>
        
        
        <div class="border-t border-gray-200 mt-8 py-4 text-center text-gray-500 text-sm">
            Made with ❤️ by Rajesh Maheshwari       </div>
    </footer>

</body>
</html>

Related Examples

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

Author:
Pagedone

1 year ago

2.9k
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

3k
Footer version Ousmane
Ce footer est associer a un menu de navigation qui apparait sous le mobile donc avec sa plus besoin de gerer les menus sous le mobile.

Author:
Ousmane CISSE

4 months ago

260
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.

Author:
Abdul Jabbar Al Nahid

7 months ago

587
Newsletter Footer
Fully Responsive newsletter footer page

Author:
AKASH GANDHAR

1 year ago

2.2k
Footer

Author:
Ivan K

1 year ago

3.4k
Footer with social media icons
If you want to use colorful social media icons with address location, sitemap links and newsletter.

Author:
Pagedone

1 year ago

3.6k
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

1 year ago

2.3k
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Author:
Pagedone

1 year ago

3k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 year ago

2.4k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.9k
Big footer with lots of links

Author:
Henrik R.

1 year ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components