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

997

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

Sticky bottom footer

Author:
Isabella Kowalski

2 years ago

10.4k
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

4 months ago

616
Footer for blog
https://github.com/tailwindow/component

Author:
Prem..

3 years ago

17.7k
Horizontal footer with light version
Use this example for simple horizontal layout of footer in light version with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

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

Author:
Pagedone

1 year ago

2.1k
Minimal responsive footer

Author:
Mr Robot

2 years ago

11.3k
Small Footer

Author:
Abhijit Sen

2 years ago

11.5k
Simple Footer

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

2.4k
Footer with social media buttons

Author:
Sophia Baker

2 years ago

13.4k
Footer
A simple footer with link adjustment for smartphones

Author:
Matti

10 months ago

922
Big footer with lots of links

Author:
Henrik R.

1 year ago

3.4k
Responsive Footer
This a full responsive footer made with tailwind

Author:
Pape Toulé Yade

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components