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 606 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

Simple footer with CTA Button
You can use this simple footer as a base for any type of websites. It includes a single CTAs button that you can customize according to your requirement.

Pagedone

2 years ago

2.6k
Tailwind Footer with dark version
This example can be used if you are looking for four column footer in dark version with sitemap links, brand logo, and social media accounts.

Pagedone

2 years ago

4.4k
Simple footer

Piet Vriend

3 years ago

16.5k
Footer

Ivan K

2 years ago

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

Pagedone

2 years ago

3.5k
footer

Raul antonio de la cruz hernandez

11 months ago

851
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.

Maxim

1 year ago

2.3k
Footer with background
Apply background color to your footer to provide immense look of footer area.

Pagedone

2 years ago

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

Nikita

2 years ago

4.9k
Simple Footer 3

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
Simple centered footer
Use this example for simple footer with horizontal sitemap links, brand logo, and social media accounts.This example can also be used as a tailwind sticky footer.

Pagedone

2 years ago

3.7k
Footer, TailwindFlex v2
Another footer version of tailwindflex.com Example users randomly picked: Samuel & Prajwal

Matti

1 year ago

1.4k