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

1.3k

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

Footer blue theme

Author:
Leon Bachmann

1 year ago

11.6k
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Author:
Pagedone

6 months ago

1.2k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

4 months ago

800
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

6 months ago

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

6 months ago

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

6 months ago

961
Footer (Tailwind UI)

Author:
Gopi Yadav

1 year ago

10.9k
Footer
responsive footer

Author:
Aman kumar

9 months ago

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

6 months ago

1.4k
Newsletter with address location
Use this example to first show brand logo card, then show address locations of your company, a newsletter sign-up form.

Author:
Pagedone

6 months ago

1.1k
Dark Footer with subscribe form
Use below exmaple of Tailwind CSS Dark Footer with Newsletter Subscription Form with brand logo and site links.

Author:
Pagedone

6 months ago

1.1k
Centered footer with subscribe form
Use this example to center align everything in footer with brand logo, sitemap links and subscribe form.

Author:
Pagedone

6 months ago

423

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent