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

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

NebulaFooter
Footer

Author:
Juraj

2 weeks ago

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

Author:
Pagedone

11 months ago

2.5k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

9 months ago

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

Author:
Pagedone

11 months ago

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

Author:
Matti

3 months ago

451
Small Footer

Author:
Abhijit Sen

2 years ago

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

Author:
Pape Toulé Yade

11 months ago

1.7k
Simple footer

Author:
Piet Vriend

2 years ago

14.7k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

2 weeks ago

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

Author:
Pagedone

11 months ago

1.4k
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

11 months ago

2.1k
Footer with 3 sections

Author:
Mr Robot

2 years ago

12.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components