Home
Anonymous
Basic footer

Basic footer

Simple footer with follow us section

This tailwind example is contributed by Anonymous, on 25-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Footer

Author Anonymous

1.9k

Fork Fullscreen

<footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div>
                <h4 class="text-lg font-bold mb-4">YourApp</h4>
                <p>YourApp is the all-in-one solution for productivity and team collaboration.</p>
            </div>
            <div>
                <h4 class="text-lg font-bold mb-4">Quick Links</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="hover:text-gray-300">Features</a></li>
                    <li><a href="#" class="hover:text-gray-300">Pricing</a></li>
                    <li><a href="#" class="hover:text-gray-300">Blog</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-lg font-bold mb-4">Contact Us</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="hover:text-gray-300">support@yourapp.com</a></li>
                    <li><a href="#" class="hover:text-gray-300">+1-555-123-4567</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-lg font-bold mb-4">Follow Us</h4>
                <div class="flex space-x-4">
                    <a href="#" class="hover:text-blue-400"><i class="fab fa-facebook fa-lg"></i></a>
                    <a href="#" class="hover:text-blue-400"><i class="fab fa-twitter fa-lg"></i></a>
                    <a href="#" class="hover:text-pink-500"><i class="fab fa-instagram fa-lg"></i></a>
                </div>
            </div>
        </div>
        <div class="text-center mt-8">
            <p>© 2023 YourApp. All rights reserved.</p>
        </div>
    </div>
</footer>

Related Examples

Simple tailwind footer
Simple tailwind footer with newsletter

Author:
Laurits

2 years ago

10k
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.

Author:
Nicole Shalom

3 months ago

403
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.4k
Responsive footer
Standard footer format

Author:
Emre Yılmaz

1 year ago

3.1k
Basic footer

Author:
Mr Robot

2 years ago

14.3k
Horizontal footer
Use this horizontal footer tailwind css example if you want horizontal footer layout side by side, which includes sitemap links, brand logo and social media accounts.

Author:
Pagedone

1 year ago

2.5k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Author:
Pagedone

1 year ago

1.7k
Very simple footer

Author:
Arya

2 years ago

12.4k
Pre-footer Newsletter
Use this example with a Newsletter section before the footer, a sitemap, the logo of your brand and social media accounts.

Author:
Pagedone

1 year ago

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

Author:
Mr Robot

2 years ago

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

Author:
Matti

7 months ago

831
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

1 month ago

163

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components