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

451

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

Big footer with lots of links

Author:
Henrik R.

1 year ago

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

Author:
Pagedone

11 months ago

1.4k
Responsive footer
Standard footer format

Author:
Emre Yılmaz

1 year ago

2.5k
Footer with images

Author:
Mr Robot

2 years ago

8.8k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

2 months ago

368
Basic footer
Simple footer with follow us section

Author:
Anonymous

9 months ago

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

Author:
ABDO-SY

2 weeks ago

132
Footer for blog
https://github.com/tailwindow/component

Author:
Prem..

2 years ago

16.1k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

2 years ago

10.5k
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

11 months ago

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

Author:
Pagedone

11 months ago

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

Author:
Pagedone

11 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components