footer

Footer with contact info, navigation, account links, and social media icons.

This tailwind example is contributed by Yasmin Rodrigues, on 19-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Yasmin Rodrigues

2.6k

Fork Fullscreen

<footer class="text-white px-8 py-6 bg-gray-800">
    <div class="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="mb-8 md:mb-0">
            <h3 class="text-lg font-bold mb-4">Example</h3>
            <p class="mb-2">Example</p>
            <p class="mb-2">123 Example Street, Example City, Example Country</p>
            <p class="mb-2"><a href="tel:+1514890000" class="hover:text-yellow-400">1-514-890-0000</a></p>
            <p><a href="mailto:calinscompagnies@calins.com"
                    class="hover:text-yellow-400">calinscompagnies@calins.com</a></p>
        </div>
        <div class="mb-8 md:mb-0">
            <h3 class="text-lg font-bold mb-4">Example</h3>
            <ul>
                <li><a href="#" class="hover:text-yellow-400">About Us</a></li>
                <li><a href="#" class="hover:text-yellow-400">Delivery Policy</a></li>
                <li><a href="#" class="hover:text-yellow-400">Contact Us</a></li>
                <li><a href="#" class="hover:text-yellow-400">Our Stores</a></li>
                <li><a href="#" class="hover:text-yellow-400">Help</a></li>
                <li><a href="#" class="hover:text-yellow-400">Work at Hugs</a></li>
            </ul>
        </div>
        <div class="mb-8 md:mb-0">
            <h3 class="text-lg font-bold mb-4">Example</h3>
            <ul>
                <li><a href="#" class="hover:text-yellow-400">My Personal Information</a></li>
                <li><a href="#" class="hover:text-yellow-400">My Addresses</a></li>
                <li><a href="#" class="hover:text-yellow-400">My Orders</a></li>
                <li><a href="#" class="hover:text-yellow-400">My Favorites</a></li>
            </ul>
        </div>
        <div>
            <h3 class="text-lg font-bold mb-4">Contact Us</h3>
            <ul class="mb-4">
                <li><a href="tel:+1514890000" class="hover:text-yellow-400">1-514-890-0000</a></li>
                <li><a href="mailto:calinscompagnies@calins.com" class="hover:text-yellow-400">Send mail</a></li>
            </ul>
            <div class="mt-4 icons">
                <a href="#" class="mr-2"><i class="fab fa-facebook fa-2x"></i></a>
                <a href="#" class="mr-2"><i class="fab fa-instagram fa-2x"></i></a>
                <a href="mailto:calinscompagnies@calins.com"><i class="far fa-envelope fa-2x"></i></a>
            </div>
        </div>
    </div>
    <p class="text-center mt-8">&copy;  2024 - All rights reserved.</p>
</footer>

Related Examples

Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.5k
Footer with social icons

Author:
Mr Robot

3 years ago

15.6k
Newsletter Footer
Fully Responsive newsletter footer page

Author:
AKASH GANDHAR

1 year ago

1.9k
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

7 months ago

1k
Five columns with subscribe button
This example of tailwind css footer can be used if you want five columns in your footer with brand logo, sitemap links, description and social media account with additional subscibe button to connect with your website.

Author:
Pagedone

1 year ago

2.4k
Footer blue theme

Author:
Leon Bachmann

2 years ago

13.3k
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.7k
Simple footer

Author:
threehymns

1 year ago

5.1k
Active Beauty Main Page

Author:
Maxim

6 months ago

909
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

3 months ago

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

Author:
Matti

9 months ago

909
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

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components