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

Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

6 months ago

1.2k
Simple footer

Author:
threehymns

1 year ago

5k
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

5 months ago

900
Footer with App buttons
This example can be used if you want add your app buttons of store for download with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

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

Author:
Matti

7 months ago

732
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.9k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

8 months ago

3.2k
Dark Footer with newsletter
Use Following Footer for dark vsersion of your website with newsletter, social icons and site links.

Author:
Pagedone

1 year ago

2.3k
Four columns with address location
You can use this Tailwind Footer example to first show address location of your company with brand logo next to sitemap links.

Author:
Pagedone

1 year ago

1.8k
Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

Author:
KULDEEP

1 month ago

503
subscribe form in Footer
You can use following subscribe form in your tailwind footer section beside contact information such as email address, phone numbers etc and You can also shows community counts.

Author:
Pagedone

1 year ago

2.3k
Footer
Simple Dark footer

Author:
KULDEEP

1 month ago

218

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components