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

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

Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

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

7 months ago

1.3k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

2 years ago

9.6k
Footer with images

Author:
Mr Robot

1 year ago

8.1k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Author:
Pagedone

7 months ago

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

Author:
Akram Khan

5 months ago

1k
Sticky bottom footer

Author:
Isabella Kowalski

1 year ago

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

Author:
Nikita

10 months ago

2.6k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

1 year ago

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

7 months ago

1.4k
Standard footer
You can use this example for five column footer with social media accounts, sitemap links, copyright notice and brand logo.

Author:
Pagedone

7 months ago

958
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

7 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components