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

Responsive footer
Standard footer format

Author:
Emre Yılmaz

1 year ago

3k
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

5 months ago

793
Footer

Author:
Abdul Baset Bappy

1 month ago

119
Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Author:
Maxim

7 months ago

716
Responsive Footer
This a full responsive footer made with tailwind

Author:
Pape Toulé Yade

1 year ago

2k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

4 months ago

719
Newsletter Footer
Fully Responsive newsletter footer page

Author:
AKASH GANDHAR

1 year ago

1.8k
beautifull footer
We create a Advance animated footer section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

1.9k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

1.7k
NebulaFooter
Footer

Author:
Juraj

4 months ago

513
Footer - Modern minimal style
clean and uncluttered, following a minimalist approach

Author:
Nikita

1 year ago

3.9k
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.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components