Home
Ousmane CISSE
Footer version Ousmane

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

Footer

Author Ousmane CISSE

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

macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

392
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

10 months ago

1.2k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.5k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

7 months ago

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

Author:
Pagedone

1 year ago

2.5k
Simple footer

Author:
Piet Vriend

2 years ago

15.8k
Four columns with address location
You can use this Tailwind Footer example to first show address location of your company with brand logo next to sitemap links.

Author:
Pagedone

1 year ago

2.3k
Crafting a Responsive Footer with TypeScript, and Tailwind CSS
This is a well-structured and comprehensive footer section that uses Tailwind CSS for styling and layout. Here’s a brief explanation of what each part does: Footer Container (<footer class="bg-gray-800">): The footer is wrapped in a <footer> element with a dark background using the bg-gray-800 class. The aria-labelledby="footer-heading" attribute is used for accessibility, linking the <footer> to the invisible heading (<h2 id="footer-heading" class="sr-only">Footer</h2>). Main Content Area: The content inside the footer is centered and spaced using utility classes like max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8. Footer Sections: The footer is divided into several sections using grid layouts (xl:grid xl:grid-cols-5 xl:gap-8), which organize content into columns. Each section (Solutions, Support, Company, Legal) contains a heading with a list of links. These links are styled with Tailwind classes for consistent spacing and hover effects (text-base text-gray-300 hover:text-white). Language & Currency Selector: This section provides dropdowns for selecting language and currency. Tailwind's form utilities (@tailwindcss/forms plugin) are used to style the select elements. Newsletter Subscription Form: A subscription form is provided with an email input and a submit button. The form is styled to be responsive, with focus states for accessibility (focus:ring-2 focus:ring-offset-2). Social Media Links: Social media icons (Facebook, Instagram, etc.) are included, each wrapped in a link with hover effects. Icons are created using SVGs, which are scalable and look sharp at any size. Final Section: The footer concludes with another grid layout, ensuring spacing and alignment for different screen sizes. Customization Tips: Colors: You can easily customize the colors using Tailwind's utility classes (e.g., bg-gray-800, text-gray-400) to match your design. Icons: Replace SVGs with the appropriate icons for your needs. You might use a different icon set or add more icons. Responsive Design: Tailwind's utility classes like sm:, md:, lg:, xl: ensure that the footer is responsive across devices. Adjust the layout or padding if needed. Additional Considerations: SEO: Ensure the links in the footer point to meaningful pages to improve SEO. Accessibility: Consider adding aria-labels to the form elements and social media links to enhance accessibility further. This footer is ready to be integrated into a Tailwind CSS-powered project, offering both aesthetic appeal and functional utility.

Author:
zobaidul kaziex

1 year ago

2.8k
Footer with social icons

Author:
Mr Robot

3 years ago

15.7k
Responsive Footer
This a full responsive footer made with tailwind

Author:
Pape Toulé Yade

1 year ago

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

1 year ago

3k
Simple Footer

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components