Home
Pape Toulé Yade
Responsive Footer

Responsive Footer

This a full responsive footer made with tailwind

This tailwind example is contributed by Pape Toulé Yade, on 16-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Footer

Author Pape Toulé Yade

1.5k

Fork Fullscreen

<div class="container mx-auto flex flex-wrap justify-between">
        
        <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-4">
            <h2 class="text-xl font-bold mb-4">À propos</h2>
            <ul>
                <li><a href="#" class="block hover:text-gray-300">Qui sommes-nous?</a></li>
                <li><a href="#" class="block hover:text-gray-300">Notre équipe</a></li>
                <li><a href="#" class="block hover:text-gray-300">Nos valeurs</a></li>
            </ul>
        </div>

<div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-4">
            <h2 class="text-xl font-bold mb-4">Services</h2>
            <ul>
                <li><a href="#" class="block hover:text-gray-300">Service 1</a></li>
                <li><a href="#" class="block hover:text-gray-300">Service 2</a></li>
                <li><a href="#" class="block hover:text-gray-300">Service 3</a></li>
            </ul>
        </div>

<div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-4">
            <h2 class="text-xl font-bold mb-4">Contact</h2>
            <ul>
                <li><a href="#" class="block hover:text-gray-300">Contactez-nous</a></li>
                <li><a href="#" class="block hover:text-gray-300">Support</a></li>
                <li><a href="#" class="block hover:text-gray-300">FAQ</a></li>
            </ul>
        </div>

<div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-4">
            <h2 class="text-xl font-bold mb-4">Réseaux sociaux</h2>
            <ul>
                <li class="flex align-items"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        fill="currentColor" class="bi bi-facebook mt-1" viewBox="0 0 16 16">
                        <path
                            d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
                    </svg><a href="#" class="block hover:text-gray-300 ml-2">Facebook</a></li>
                <li class="flex align-items"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        fill="currentColor" class="bi bi-twitter-x mt-1" viewBox="0 0 16 16">
                        <path
                            d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
                    </svg><a href="#" class="block hover:text-gray-300 ml-2">Twitter</a></li>
                <li class="flex align-items"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        fill="currentColor" class="bi bi-instagram mt-1 " viewBox="0 0 16 16">
                        <path
                            d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
                    </svg><a href="#" class="block hover:text-gray-300 ml-2">Instagram</a></li>
            </ul>
        </div>
    </div>
    <hr class="w-4/5 mt-2 mx-auto">

Related Examples

Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

2 weeks ago

69
Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

10.3k
Simple tailwind footer
Simple tailwind footer with newsletter

Author:
Laurits

2 years ago

9.4k
Footer with images

Author:
Mr Robot

2 years ago

8.6k
Footer

Author:
Ivan K

11 months ago

2k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

3 months ago

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

10 months ago

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

Author:
Akram Khan

8 months ago

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

Author:
Nikita

1 year ago

3k
Sticky bottom footer

Author:
Isabella Kowalski

2 years ago

9.4k
Footer (Tailwind UI)

Author:
Gopi Yadav

2 years ago

11.5k
Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Author:
Maxim

2 months ago

170

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components