Home
Matti
Footer, TailwindFlex v2

Footer, TailwindFlex v2

Another footer version of tailwindflex.com
Example users randomly picked: Samuel & Prajwal

This tailwind example is contributed by Matti, on 11-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Footer

Author Matti

294

Fork Fullscreen

<footer class="relative z-10 bg-white dark:!bg-gray-800 dark:text-gray-200 w-full mt-4 md:!mt-0 overflow-hidden">
    <div class="w-full px-2 md:!px-0 flex flex-col md:flex-row md:w-4/5 lg:w-4/5 2xl:w-3/5 md:mx-auto py-12">
        <div class="w-full px-2 md:!px-0  md:w-5/12 mt-6 md:!mt-0">
            <div class="flex flex-col">
                <a href="/" class="flex items-center shrink-0">
                    <img class="w-10" height="100" width="100" src="https://tailwindflex.com/images/logo.svg" alt="Talwindflex logo">
                    <span class="hidden md:flex text-2xl mt-0.5 font-bold text-gray-500 dark:text-gray-200">
                        TailwindFlex
                    </span>
                </a>
                <p class="font-light text-gray-500 dark:text-gray-200 mt-4">
                    You can copy and paste it or modify however you want.
                </p>
                <p class="font-light text-gray-500 dark:text-gray-200 mt-2">
                    Feel free to name the author in a hidden remark or to set the components as favorite. Optional you can you can contact the author and say thanks by send a message. 
                </p>  
                <div class="flex flex-row mt-4 gap-x-4">   
                    <div class="p-2 border !border-gray-600 cursor-pointer bg-transparent hover:!bg-emerald-600 fill-gray-500 hover:fill-white">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 -960 960 960"><path d="M520-600v-240h320v240H520ZM120-440v-400h320v400H120Zm400 320v-400h320v400H520Zm-400 0v-240h320v240H120Zm80-400h160v-240H200v240Zm400 320h160v-240H600v240Zm0-480h160v-80H600v80ZM200-200h160v-80H200v80Zm160-320Zm240-160Zm0 240ZM360-280Z"/></svg>
                    </div>     
                    <div class="p-2 border !border-gray-600 cursor-pointer bg-transparent hover:!bg-emerald-600 fill-gray-500 hover:fill-white ">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 -960 960 960"><path d="M160-80v-560q0-33 23.5-56.5T240-720h320q33 0 56.5 23.5T640-640v560L400-200 160-80Zm80-121 160-86 160 86v-439H240v439Zm480-39v-560H280v-80h440q33 0 56.5 23.5T800-800v560h-80ZM240-640h320-320Z"/></svg>
                    </div>        
                    <div class="p-2 border !border-gray-600 cursor-pointer bg-transparent hover:!bg-emerald-600 fill-gray-500 hover:fill-white ">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 -960 960 960"><path d="M200-120q-51 0-72.5-45.5T138-250l222-270v-240h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v240l222 270q32 39 10.5 84.5T760-120H200Zm80-120h400L544-400H416L280-240Zm-80 40h560L520-492v-268h-80v268L200-200Zm280-280Z"/></svg>
                    </div>        
                    <div class="p-2 border !border-gray-600 cursor-pointer bg-transparent hover:!bg-emerald-600 fill-gray-500 hover:fill-white ">
                        <svg xmlns="http://www.w3.org/2000/svg" class="fh-4 w-4" viewBox="0 -960 960 960"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
                    </div>
                    <div class="p-2 border !border-gray-600 cursor-pointer bg-transparent hover:!bg-red-600 fill-gray-500 hover:fill-white ">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 -960 960 960"><path d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"/></svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full flex flex-col px-4 md:!px-0 md:w-3/12 mt-6 md:!mt-0">
            <h3 class="font-semibold text-xl mb-4">Latest contributes</h3>
            <div class="flex flex-col mt-2">
                <div class="flex flex-row rounded-t-lg overflow-hidden cursor-pointer">
                    <img class="w-12 h-12" src="https://tailwindflex.com/images/user.png" title="recent-user" alt="{rcnt.user}" />
                    <div class="px-3">
                        <h4 class="text-sm font-light line-clamp-1">@<span class="font-semibold">matti</span> Feature card</h4>
                        <p class="text-sm font-light line-clamp-1">This is an feature card or call to action?</p>
                        <p class="text-sm font-light line-clamp-1">01.01.1970</p>
                    </div>
                </div>
            </div>
            <div class="flex flex-col mt-2">
                <div class="flex flex-row rounded-t-lg overflow-hidden cursor-pointer">
                    <img class="w-12 h-12" src="https://tailwindflex.com/storage/avatars/1066.webp?ver=2" title="recent-user" alt="{rcnt.user}" />
                    <div class="px-3">
                        <h4 class="text-sm font-light line-clamp-1">@<span class="font-semibold">Samuel Abera</span> Feature card</h4>
                        <p class="text-sm font-light line-clamp-1">This is an feature card or call to action?</p>
                        <p class="text-sm font-light line-clamp-1">01.01.1970</p>
                    </div>
                </div>
            </div>
            <div class="flex flex-col mt-2">
                <div class="flex flex-row rounded-t-lg overflow-hidden cursor-pointer">
                    <img class="w-12 h-12" src="https://lh3.googleusercontent.com/a-/AFdZucpC_6WFBIfaAbPHBwGM9z8SxyM1oV4wB4Ngwp_UyQ=s96-c" title="recent-user" alt="{rcnt.user}" />
                    <div class="px-3">
                        <h4 class="text-sm font-light line-clamp-1">@<span class="font-semibold">Prajwal Hallale</span> Feature card</h4>
                        <p class="text-sm font-light line-clamp-1">This is an feature card or call to action?</p>
                        <p class="text-sm font-light line-clamp-1">01.01.1970</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full flex flex-col px-4 md:!px-0 md:w-4/12 mt-6 md:!mt-0">
            <h3 class="font-semibold text-xl mb-4">Favorite Tags</h3>
            <div class="flex flex-row mt-2 gap-3 flex-wrap">
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Footer</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Call to action</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Hero</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Card</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Grid</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Feature showcase</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Pricing</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Input</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Banner</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Timeline</span>
                <span class="py-1 px-3 text-sm bg-gray-50 hover:bg-emerald-600 hover:text-white dark:bg-gray-500 dark:hover:bg-emerald-500 rounded-sm cursor-pointer">Navigation</span>
            </div>
        </div>
        <div class="w-full flex flex-col px-4 md:!px-0 md:w-3/12 mt-6 md:!mt-0">
            <h3 class="font-semibold text-xl mb-4 md:ml-4">Contribute FAQ</h3>
            <div class="flex flex-row md:flex-col mt-2 gap-3 flex-wrap md:ml-4">
    
                <a href="#" class="inline flex flex-row flex-wrap text-gray-500 fill-gray-500 hover:fill-emerald-600 hover:text-emerald-600 hover:ml-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4 mt-1" viewBox="0 -960 960 960"><path d="m242-200 200-280-200-280h98l200 280-200 280h-98Zm238 0 200-280-200-280h98l200 280-200 280h-98Z"/></svg>
                    <p class="font-light ml-2">FAQ</p>
                </a>
                <a href="#" class="inline flex flex-row text-gray-500 fill-gray-500 hover:fill-emerald-600 hover:text-emerald-600 hover:ml-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4 mt-1" viewBox="0 -960 960 960"><path d="m242-200 200-280-200-280h98l200 280-200 280h-98Zm238 0 200-280-200-280h98l200 280-200 280h-98Z"/></svg>
                    <p class="font-light ml-2">Playground</p>
                </a>
                <a href="#" class="inline flex flex-row text-gray-500 fill-gray-500 hover:fill-emerald-600 hover:text-emerald-600 hover:ml-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4 mt-1" viewBox="0 -960 960 960"><path d="m242-200 200-280-200-280h98l200 280-200 280h-98Zm238 0 200-280-200-280h98l200 280-200 280h-98Z"/></svg>
                    <p class="font-light ml-2">References</p>
                </a>
                <a href="#" class="inline flex flex-row text-gray-500 fill-gray-500 hover:fill-emerald-600 hover:text-emerald-600 hover:ml-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4 mt-1" viewBox="0 -960 960 960"><path d="m242-200 200-280-200-280h98l200 280-200 280h-98Zm238 0 200-280-200-280h98l200 280-200 280h-98Z"/></svg>
                    <p class="font-light ml-2">Guideline</p>
                </a>                               
                <a href="#" class="inline flex flex-row text-gray-500 fill-gray-500 hover:fill-emerald-600 hover:text-emerald-600 hover:ml-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4 mt-1" viewBox="0 -960 960 960"><path d="m242-200 200-280-200-280h98l200 280-200 280h-98Zm238 0 200-280-200-280h98l200 280-200 280h-98Z"/></svg>
                    <p class="font-light ml-2">Tailwind.css</p>
                </a>

</div>
        </div>
    </div>
    <div class="bg-gray-100 dark:bg-zinc-800 dark:text-[#6a7980] py-3"> 
        <div class="w-full px-2 md:!px-0 md:w-3/5 md:mx-auto flex flex-col md:flex-row text-sm">
            <p class="self-center md:self-start mb-2 md:!mb-0">ℂ Tailwindcss</p>
            <div class="self-center md:self-end flex flex-row w-auto md:ml-auto gap-x-6">
                <a href="#" class="hover:underline underline-offset-8 hover:text-emerald-600"><p class="font-semibold">Home</p></a>
                <a href="#" class="hover:underline underline-offset-8 hover:text-emerald-600"><p class="font-semibold">Services</p></a>
                <a href="#" class="hover:underline underline-offset-8 hover:text-emerald-600"><p class="font-semibold">References</p></a>
                <a href="#" class="hover:underline underline-offset-8 hover:text-emerald-600"><p class="font-semibold">Shop</p></a>
                <a href="#" class="hover:underline underline-offset-8 hover:text-emerald-600"><p class="font-semibold">Newsletter</p></a>
                <a href="#" class="hover:underline underline-offset-8 hover:text-emerald-600"><p class="font-semibold">Privacy</p></a>
                <a href="#" class="hover:underline underline-offset-8 hover:text-emerald-600"><p class="font-semibold">Imprint</p></a>
            </div>
        </div>
    </div>
</footer>

Related Examples

Simple Footer

Author:
Samuel Abera

4 months ago

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

Author:
Ayyamperumal S

3 weeks ago

292
Big footer with lots of links

Author:
Henrik R.

11 months ago

2.5k
Footer
A simple footer with link adjustment for smartphones

Author:
Matti

3 months ago

403
Footer with 3 sections

Author:
Mr Robot

2 years ago

11.9k
footer

Author:
isolde

1 year ago

5.7k
Five columns with subscribe button
This example of tailwind css footer can be used if you want five columns in your footer with brand logo, sitemap links, description and social media account with additional subscibe button to connect with your website.

Author:
Pagedone

10 months ago

1.7k
Basic footer

Author:
Mr Robot

2 years ago

13.1k
Footer with App buttons
This example can be used if you want add your app buttons of store for download with brand logo, sitemap links and social media accounts.

Author:
Pagedone

10 months ago

1.5k
Footer with images

Author:
Mr Robot

2 years ago

8.6k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.1k
Footer
responsive footer

Author:
Aman kumar

1 year ago

6.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components