Footer version Ousmane

Ce footer est associer a un menu de navigation qui apparait sous le mobile donc avec sa plus besoin de gerer les menus sous le mobile.

This tailwind example is contributed by Ousmane CISSE, on 23-Oct-2025. Component is made with Tailwind v3.4. It is responsive.

Footer

Author Ousmane CISSE

Tailwind v3.4 558 3

Fork Fullscreen

<div class="text-gray-200">
                <h3 class="mb-2 text-lg font-bold text-white">Accès/Contact</h3>
                <div class="flex-shrink-0 mb-2">
                    <a href="#" class="flex items-center">
                        <img src="{{ asset('images/SyntropiaFooterLogo.png') }}" alt="Logo" class="w-auto h-15">
                    </a>
                </div>
                <div class="flex items-start mb-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                        class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
                    </svg>
                    <address class="text-sm not-italic">
                        rue et autre<br>
                        quartier,votre pays
                    </address>
                </div>
                <div class="flex items-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                        class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                    </svg>
                    <span class="text-sm">+XXX 55298081</span>
                </div>
                <div class="flex items-center mb-4">
                    <svg class="w-5 h-5 mt-1 mr-2 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                        class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                    </svg>
                    <span class="text-sm">machin.truc@gmail.com</span>
                </div>
                <div class="flex space-x-4">
                    <a href="https://www.instagram.com/cherif_ecommerce/?utm_source=qr&r=nametag" target="_blank"
                        class="flex items-center justify-center w-8 h-8 transition-colors duration-300 bg-gray-200 rounded-full hover:bg-white">
                        <svg height="56.7px" id="Layer_1" style="enable-background:new 0 0 56.7 56.7;" version="1.1"
                            viewBox="0 0 56.7 56.7" width="56.7px" xml:space="preserve" class="text-gray-300 "
                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g>
                                <circle cx="28.1" cy="30" r="4.4" />
                                <path
                                    d="M33.6,19.2h-11c-1.6,0-3,0.5-3.9,1.4c-0.9,0.9-1.4,2.3-1.4,3.9v11c0,1.6,0.5,3,1.5,4c1,0.9,2.3,1.4,3.9,1.4h10.9   c1.6,0,3-0.5,3.9-1.4c1-0.9,1.5-2.3,1.5-3.9v-11c0-1.6-0.5-2.9-1.4-3.9C36.6,19.7,35.3,19.2,33.6,19.2z M28.1,36.8   c-3.8,0-6.8-3.1-6.8-6.8c0-3.8,3.1-6.8,6.8-6.8S35,26.2,35,30C35,33.8,31.9,36.8,28.1,36.8z M35.2,24.5c-0.9,0-1.6-0.7-1.6-1.6   s0.7-1.6,1.6-1.6s1.6,0.7,1.6,1.6S36.1,24.5,35.2,24.5z" />
                                <path
                                    d="M28.3,5.2c-13.6,0-24.6,11-24.6,24.6c0,13.6,11,24.6,24.6,24.6c13.6,0,24.6-11,24.6-24.6C53,16.2,41.9,5.2,28.3,5.2z    M41.4,35.6c0,2.3-0.8,4.3-2.2,5.7c-1.4,1.4-3.4,2.1-5.6,2.1H22.7c-2.2,0-4.2-0.7-5.6-2.1c-1.5-1.4-2.2-3.4-2.2-5.7v-11   c0-4.6,3.1-7.8,7.8-7.8h11c2.3,0,4.2,0.8,5.6,2.2c1.4,1.4,2.1,3.3,2.1,5.6V35.6z" />
                            </g>
                        </svg>
                    </a>
                    <a href="#"
                        class="flex items-center justify-center w-8 h-8 transition-colors duration-300 bg-gray-200 rounded-full hover:bg-white">
                        <svg id="Apple" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <style>
                                    .cls-1 {
                                        fill: none;
                                        stroke: #000;
                                        stroke-linejoin: round;
                                        stroke-width: 5px;
                                    }
                                </style>
                            </defs>
                            <path class="cls-1"
                                d="M415.27,214.69V146.55c-89.08-3.75-91.89-84.69-92-92.3v-.57H254.49V319.06h0a54.5,54.5,0,1,1-38.64-52.18V196.59A123.49,123.49,0,1,0,323.43,319.06c0-1.73-.05-3.45-.12-5.16V183.22C355,212.22,415.27,214.69,415.27,214.69Z" />
                        </svg>
                    </a>
                    <a href="www.linkedin.com/in/ctexi" target="_blank"
                        class="flex items-center justify-center w-8 h-8 transition-colors duration-300 bg-gray-200 rounded-full hover:bg-white">
                        <svg data-name="Layer 1" id="Layer_1" viewBox="0 0 128 128"
                            xmlns="http://www.w3.org/2000/svg">
                            <title />
                            <path
                                d="M115.46,2H12.54A10.66726,10.66726,0,0,0,1.89,12.66V115.34A10.66731,10.66731,0,0,0,12.54,126H115.46a10.66731,10.66731,0,0,0,10.65-10.66V12.66A10.66726,10.66726,0,0,0,115.46,2ZM22.51,27.04a5.54383,5.54383,0,0,1,5.54-5.53h8.58a5.53526,5.53526,0,0,1,5.53,5.53v8.59a5.53526,5.53526,0,0,1-5.53,5.53H28.05a5.54383,5.54383,0,0,1-5.54-5.53Zm21.86,77.74a1.70715,1.70715,0,0,1-1.7,1.71H22.07a1.70715,1.70715,0,0,1-1.7-1.71V44.61a1.70715,1.70715,0,0,1,1.7-1.71h20.6a1.70715,1.70715,0,0,1,1.7,1.71Zm63.26,0a1.70715,1.70715,0,0,1-1.7,1.71H89.29a1.7071,1.7071,0,0,1-1.7-1.71V72.03c0-2.9-.32-6.99-3.1-9.03-3.62-2.67-8.34-1.4-11.13,1.22-1.88,1.75-2.79,4.44-2.79,8.22v32.34a1.71571,1.71571,0,0,1-1.71,1.71H52.23a1.71566,1.71566,0,0,1-1.71-1.71V44.61a1.71566,1.71566,0,0,1,1.71-1.71H68.86a1.71571,1.71571,0,0,1,1.71,1.71v1.26c.13-.08.26-.17.39-.25a23.394,23.394,0,0,1,12.43-3.54c7.14,0,13.03,2.36,17.53,7.02,5.55,5.75,6.71,13.75,6.71,19.44Z" />
                        </svg>
                    </a>
                    <a href="https://www.facebook.com/share/p/1EFMsESwYe/" target="_blank"
                        class="flex items-center justify-center w-8 h-8 transition-colors duration-300 bg-gray-200 rounded-full hover:bg-white">
                        <svg style="enable-background:new 0 0 100 100;" version="1.1" viewBox="0 0 100 100"
                            xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="Layer_1" />
                            <g id="Layer_2">
                                <g>
                                    <path
                                        d="M96.106,48.881c-0.77,0-1.394,0.626-1.394,1.399c0,21.747-15.13,40.061-36.21,44.154V65.087h9.376    c0.688,0,1.273-0.504,1.378-1.187l2.049-13.408c0.144-0.82-0.548-1.631-1.378-1.611H58.502V41.58    c0.033-7.334,6.8-5.65,11.967-5.844c0.77,0,1.394-0.626,1.394-1.399V22.922c0-0.682-0.49-1.264-1.16-1.379    c-10.045-1.739-23.925-2.366-28.31,10.912c-0.535,1.77,2.047,2.602,2.648,0.872c3.489-10.805,14.71-10.674,24.034-9.203    c0,0,0,8.814,0,8.814h-4.434c-5.589,0-8.926,3.231-8.926,8.642v8.7c0,0.773,0.624,1.399,1.394,1.399h11.194l-1.621,10.61h-9.573    c-0.77,0-1.394,0.626-1.394,1.399v32.411c0,0.409,0.178,0.797,0.488,1.063C79.727,95.639,97.593,73.726,97.5,50.281    C97.5,49.507,96.875,48.881,96.106,48.881z" />
                                    <path
                                        d="M42.665,38.663c-0.77,0-1.394,0.626-1.394,1.399v8.819H30.929c-0.77,0-1.394,0.626-1.394,1.399v13.408    c0,0.773,0.624,1.399,1.394,1.399h10.341v29.347C-11.554,82.852-4.204,6.699,49.886,5.298c21.636,0,40.176,15.473,44.084,36.791    c0.14,0.76,0.864,1.263,1.624,1.122c0.757-0.14,1.258-0.869,1.119-1.629C92.561,18.937,72.867,2.5,49.886,2.5    c-58.451,1.627-65.011,84.401-7.437,94.981c0.815,0.145,1.63-0.545,1.609-1.382c0,0,0-32.411,0-32.411    c0-0.773-0.624-1.399-1.394-1.399H32.323v-10.61h10.341c0.77,0,1.394-0.626,1.394-1.399V40.062    C44.059,39.289,43.434,38.663,42.665,38.663z" />
                                </g>
                            </g>
                        </svg>
                    </a>
                </div>
            </div>

<div class="text-center relative md:right-30">
                <h3 class="mb-4 text-lg font-bold text-white">Notre Ethique</h3>
                <p class="mb-4 text-sm text-center leading-relaxed text-gray-200">
                    Chez Syntropia, notre mission est fondée sur l'intégrité, l'excellence et la responsabilité. 
                    Nous guidons nos actions par ces principes éthiques pour gagner la confiance de tous.
                </p>
            </div>

<div>
                <h3 class="mb-4 text-lg font-bold text-white">Newsletter <sup class="text-red-500">*</sup></h3>
                <p class="mb-4 text-sm leading-relaxed text-gray-200">
                    En vous inscrivant à notre newsletter vous acceptez de recevoir des communications et offres
                    marketing personnalisées par mail de notre part.
                </p>
                <form action="{{--  --}}" method="POST" class="newsletter-form">

<div class="form-group">
                        <input type="email" placeholder="Entrez votre adresse e-mail" name="email" id="email"
                            required
                            class="w-full px-4 py-3 mb-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:bg-white focus:ring-blue-600 focus:border-blue-500" />
                        
                        <button
                            class="w-full bg-[#02163d] text-white font-bold py-3 px-8 rounded-xl hover:bg-[#100761] transition-colors duration-300">
                            S'ABONNER
                        </button>
                    </div>

</form>
            </div>
        </div>

<div class="mt-4 text-center">
            <p class="mb-2 text-xs text-gray-500">
                ©2025 Syntropia, Tous droits réservés.
            </p>
            <div class="flex flex-wrap justify-center space-x-4 text-xs">
                <a href="#" class="transition-colors duration-300 hover:text-white">Mentions légales</a>
                <a href="#" class="transition-colors duration-300 hover:text-white">CGU</a>
                <a href="#" class="transition-colors duration-300 hover:text-white">Politique de
                    confidentialité</a>
                <a href="#" class="transition-colors duration-300 hover:text-white">Politique de cookies</a>
            </div>
        </div>
    </div>
    <menu class="fixed bottom-0 left-0 z-50 w-full bg-white border-t border-gray-200 shadow-lg md:hidden">
    <nav class="flex items-center justify-around h-16 font-serif">
        <a id="bottomenu" href="{{--  --}}"
            class="flex flex-col items-center justify-center p-2 transition-colors duration-200 hover:text-blue-600 {{ request()->routeIs('home') ? 'text-blue-600' : 'text-gray-500' }}">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                </path>
            </svg>
            <span class="mt-1 text-xs">Home</span>
        </a>
        <a id="bottomenu" href="{{--  --}}"
            class="flex flex-col items-center justify-center p-2 transition-colors duration-200 hover:text-blue-500 focus:text-blue-800 {{ request()->routeIs('about') ? 'text-blue-600' : 'text-gray-500' }}">
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
                viewBox="0 0 50 50" class="w-6 h-6" stroke="currentColor">
                <path
                    d="M 25 1 C 11.222656 1 0 10.878906 0 23.1875 C 0 29.234375 2.773438 34.664063 7.21875 38.6875 C 6.546875 40.761719 5.046875 42.398438 3.53125 43.65625 C 2.714844 44.332031 1.933594 44.910156 1.3125 45.46875 C 1.003906 45.746094 0.722656 46.027344 0.5 46.375 C 0.277344 46.722656 0.078125 47.21875 0.21875 47.75 L 0.34375 48.15625 L 0.6875 48.375 C 1.976563 49.117188 3.582031 49.246094 5.3125 49.125 C 7.042969 49.003906 8.929688 48.605469 10.78125 48.09375 C 14.375 47.101563 17.75 45.6875 19.53125 44.90625 C 21.289063 45.273438 23.054688 45.5 24.90625 45.5 C 38.683594 45.5 49.90625 35.621094 49.90625 23.3125 C 49.90625 11.007813 38.78125 1 25 1 Z M 25 3 C 37.820313 3 47.90625 12.214844 47.90625 23.3125 C 47.90625 34.402344 37.730469 43.5 24.90625 43.5 C 23.078125 43.5 21.355469 43.320313 19.625 42.9375 L 19.28125 42.84375 L 19 43 C 17.328125 43.738281 13.792969 45.179688 10.25 46.15625 C 8.476563 46.644531 6.710938 47.019531 5.1875 47.125 C 4.167969 47.195313 3.539063 46.953125 2.84375 46.78125 C 3.339844 46.355469 4.019531 45.847656 4.8125 45.1875 C 6.554688 43.742188 8.644531 41.730469 9.375 38.75 L 9.53125 38.125 L 9.03125 37.75 C 4.625 34.015625 2 28.875 2 23.1875 C 2 12.097656 12.175781 3 25 3 Z M 23.8125 12.8125 C 23.511719 12.8125 23.40625 12.988281 23.40625 13.1875 L 23.40625 15.8125 C 23.40625 16.113281 23.613281 16.1875 23.8125 16.1875 L 26.1875 16.1875 C 26.488281 16.1875 26.59375 16.011719 26.59375 15.8125 L 26.59375 13.1875 C 26.59375 12.886719 26.386719 12.8125 26.1875 12.8125 Z M 23.90625 20.09375 C 23.605469 20.09375 23.5 20.300781 23.5 20.5 L 23.5 33.90625 C 23.5 34.207031 23.707031 34.3125 23.90625 34.3125 L 23.90625 34.40625 L 26.1875 34.40625 C 26.488281 34.40625 26.59375 34.199219 26.59375 34 L 26.59375 20.5 C 26.59375 20.199219 26.386719 20.09375 26.1875 20.09375 Z">
                </path>
            </svg>
            <span class="mt-1 text-xs">About</span>
        </a>
        <a id="bottomenu" href="{{--  --}}"
            class="flex flex-col items-center justify-center p-2 transition-colors duration-200 hover:text-blue-600 {{ request()->routeIs('service') ? 'text-blue-600' : 'text-gray-500' }}">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
            </svg>
            <span class="mt-1 text-xs">Service</span>
        </a>
        <a id="bottomenu" href="{{--  --}}"
            class="flex flex-col items-center justify-center p-2 transition-colors duration-200 hover:text-blue-600 {{ request()->routeIs('shop.index') ? 'text-blue-600' : 'text-gray-500' }}">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z" />
            </svg>
            <span class="mt-1 text-xs">Shop</span>
        </a>
        <a id="bottomenu" href="{{--  --}}"
            class="flex flex-col items-center justify-center p-2 transition-colors duration-200 hover:text-blue-600 focus:text-blue-800 {{ request()->routeIs('contact') ? 'text-blue-600' : 'text-gray-500' }}">
            <svg class="w-6 h-6" fill="#000000" stroke="currentColor" viewBox="0 0 64 64" version="1.1"
                xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                <g id="SVGRepo_iconCarrier">
                    <g id="_x32_5_attachment"></g>
                    <g id="_x32_4_office"></g>
                    <g id="_x32_3_pin"></g>
                    <g id="_x32_2_business_card"></g>
                    <g id="_x32_1_form"></g>
                    <g id="_x32_0_headset"></g>
                    <g id="_x31_9_video_call"></g>
                    <g id="_x31_8_letter_box"></g>
                    <g id="_x31_7_papperplane"></g>
                    <g id="_x31_6_laptop"></g>
                    <g id="_x31_5_connection"></g>
                    <g id="_x31_4_phonebook"></g>
                    <g id="_x31_3_classic_telephone"></g>
                    <g id="_x31_2_sending_mail"></g>
                    <g id="_x31_1_man_talking"></g>
                    <g id="_x31_0_date"></g>
                    <g id="_x30_9_review"></g>
                    <g id="_x30_8_email"></g>
                    <g id="_x30_7_information"></g>
                    <g id="_x30_6_phone_talking">
                        <g>
                            <g>
                                <path
                                    d="M37.063,18.062h-0.0596c-0.5522,0-0.9702,0.4478-0.9702,1s0.4775,1,1.0298,1s1-0.4478,1-1S37.6152,18.062,37.063,18.062z ">
                                </path>
                                <path
                                    d="M45.1787,18.062H45.123c-0.5522,0-0.9722,0.4478-0.9722,1s0.4756,1,1.0278,1s1-0.4478,1-1S45.731,18.062,45.1787,18.062z ">
                                </path>
                                <path
                                    d="M53.2983,18.062h-0.0596c-0.5522,0-0.9702,0.4478-0.9702,1s0.4775,1,1.0298,1s1-0.4478,1-1 S53.8506,18.062,53.2983,18.062z">
                                </path>
                                <path
                                    d="M45.1953,45.9268c-5.1489-2.9038-6.6909-2.6665-10.6172-0.4468c-2.0146,1.3389-4.4404,0.5225-8.6563-2.9111 c-0.8276-0.6743-1.6592-1.4263-2.4688-2.2319c-0.8091-0.8125-1.5605-1.644-2.2344-2.4722 c-3.1782-3.8999-4.0435-7.459-3.0112-8.5317c3.042-3.271,2.3516-5.957-0.3335-10.7173c-1.6172-3.0591-3.3931-6.104-5.7568-6.8027 c-1.7139-0.5034-4.2588,0.8154-5.0166,1.3184c-1.9492,1.2983-3.8003,3.5947-4.8311,5.9937 c-1.896,4.4136-1.3931,9.7329-0.29,13.2397c1.812,5.749,6.1611,12.4063,11.6348,17.8086 c5.4043,5.4761,12.0615,9.8242,17.8081,11.6313c1.8154,0.5728,4.1167,0.9844,6.5283,0.9844c2.2437,0,4.583-0.3564,6.7124-1.271 c2.3989-1.0327,4.6938-2.8838,5.9888-4.8306c0.5039-0.7554,1.8276-3.2998,1.3184-5.021 C51.2754,49.3071,48.2305,47.5308,45.1953,45.9268z M44.2368,47.6821c1.8521,0.979,5.2998,2.8018,5.8149,4.5513 c0.1056,0.3564-0.0228,1.0059-0.2598,1.681l-13.5292-7.089C38.8073,45.4165,39.8377,45.2009,44.2368,47.6821z M11.5513,13.7314 c1.7524,0.5181,3.5752,3.9663,4.5674,5.8428c2.6213,4.647,2.613,6.1134,0.9274,8.0579L9.748,14.0356 c0.556-0.2056,1.1049-0.3412,1.499-0.3412C11.3633,13.6943,11.4658,13.7061,11.5513,13.7314z M43.873,59.6807 c-3.9175,1.6836-8.8311,1.1694-11.8501,0.2163c-5.4517-1.7144-11.8032-5.8765-16.9897-11.1328 c-0.0034-0.0034-0.0063-0.0063-0.0098-0.0098C9.7695,43.5698,5.606,37.2178,3.8872,31.7642 c-0.9497-3.0195-1.4619-7.9346,0.2202-11.8501c0.8441-1.9645,2.3123-3.8291,3.8699-4.948l7.923,14.7618 c-0.4362,2.3732,0.9189,5.9038,3.7676,9.4001c0.7153,0.8789,1.5122,1.7607,2.3711,2.623 c0.8594,0.856,1.7407,1.6528,2.6196,2.3687c3.0879,2.5153,6.3303,4.6262,9.3667,3.7915l14.8708,7.792 C47.7888,57.3002,45.8823,58.816,43.873,59.6807z">
                                </path>
                                <path
                                    d="M60.9551,10.771C56.3843,2.0591,45.5757-1.3105,36.8604,3.2568l-0.0005,0.0005 c-8.7119,4.5723-12.0825,15.3813-7.5137,24.0952c0.3311,0.6313,0.709,1.2549,1.1274,1.8613l-2.7012,4.6299 c-0.1885,0.3228-0.1812,0.7241,0.0195,1.0396c0.1997,0.3159,0.5596,0.4912,0.9321,0.4604l7.75-0.6851 c2.7095,1.5068,5.6899,2.2627,8.6748,2.2627c2.8374,0,5.6787-0.6836,8.293-2.0552 C62.1543,30.2944,65.5249,19.4854,60.9551,10.771z M52.5127,33.0952c-4.8472,2.543-10.5723,2.4214-15.3154-0.3252 c-0.1523-0.0884-0.3257-0.1348-0.501-0.1348c-0.0293,0-0.0586,0.0015-0.0879,0.0039l-6.1338,0.542l2.0532-3.519 c0.2017-0.3462,0.1777-0.7793-0.0615-1.1006c-0.5132-0.6899-0.9668-1.4092-1.3486-2.1377 c-4.0571-7.7373-1.0645-17.3354,6.6719-21.396l-0.0005,0.0005c7.7378-4.0581,17.3354-1.0635,21.395,6.6719 C63.2417,19.438,60.2485,29.0356,52.5127,33.0952z">
                                </path>
                            </g>
                        </g>
                    </g>
                    <g id="_x30_5_women_talking"></g>
                    <g id="_x30_4_calling"></g>
                    <g id="_x30_3_women"></g>
                    <g id="_x30_2_writing"></g>
                    <g id="_x30_1_chatting"></g>
                </g>
            </svg>
            <span class="mt-1 text-xs">Contact us</span>
        </a>
    </nav>
</menu>
</footer>

Related Examples

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.

KULDEEP

1 year ago

1.5k
Sticky bottom footer

Isabella Kowalski

3 years ago

11k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Rathanak Phan

1 year ago

2.3k
Minimalist iOS 26 Foote
Minimalist iOS 26 Foote

Omer fils ELENGA

10 months ago

525
Small Footer

Abhijit Sen

3 years ago

12k
Footer

Maxim

1 year ago

1.8k
portifolio
skills

ishimwe prince

1 year ago

1.7k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

ABDO-SY

1 year ago

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

Pagedone

2 years ago

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

Ayyamperumal S

1 year ago

2.7k
Responsive Footer

ariaw

1 year ago

3.1k