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 v3.4. It is responsive.

Footer

Author Yasmin Rodrigues

Tailwind v3.4 3.8k 8

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

Four columns with subscribe form
Use this example for four column footer with subscribe form, brand logo, sitemap links and social media accounts.

Pagedone

2 years ago

2.7k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Abdul Jabbar Al Nahid

1 year ago

1.1k
Responsive footer

Lukas Müller

3 years ago

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

Akram Khan

2 years ago

2.7k
Simple footer

threehymns

2 years ago

5.5k
Footer with images

Mr Robot

3 years ago

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

Pagedone

2 years ago

3.2k
NebulaFooter
Footer

Juraj

1 year ago

1.6k
Newsletter Footer
Fully Responsive newsletter footer page

AKASH GANDHAR

2 years ago

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

Pagedone

2 years ago

4k
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Pagedone

2 years ago

2.8k
Basic footer

Mr Robot

3 years ago

15.5k