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

704

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

Footer (Tailwind UI)

Author:
Gopi Yadav

2 years ago

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

Author:
Ron Hicks

2 years ago

10.8k
Centered footer with subscribe form
Use this example to center align everything in footer with brand logo, sitemap links and subscribe form.

Author:
Pagedone

1 year ago

1.7k
Responsive footer
Standard footer format

Author:
Emre Yılmaz

1 year ago

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

Author:
Pagedone

1 year ago

1.6k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

4 months ago

868
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

4 months ago

599
Newsletter with address location
Use this example to first show brand logo card, then show address locations of your company, a newsletter sign-up form.

Author:
Pagedone

1 year ago

2.1k
Simple footer

Author:
Piet Vriend

2 years ago

15.1k
Four columns with address location
You can use this Tailwind Footer example to first show address location of your company with brand logo next to sitemap links.

Author:
Pagedone

1 year ago

1.6k
Basic footer
Basic footer with subscribe to the newsletter section

Author:
Mr Robot

2 years ago

9k
Simple centered footer
Use this example for simple footer with horizontal sitemap links, brand logo, and social media accounts.This example can also be used as a tailwind sticky footer.

Author:
Pagedone

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components