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

732

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

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

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

6 months ago

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

Author:
Prem..

3 years ago

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

Author:
Pagedone

1 year ago

3k
Simple footer

Author:
Piet Vriend

2 years ago

15.4k
Active Beauty Main Page

Author:
Maxim

4 months ago

649
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

5 months ago

901
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.5k
subscribe form in Footer
You can use following subscribe form in your tailwind footer section beside contact information such as email address, phone numbers etc and You can also shows community counts.

Author:
Pagedone

1 year ago

2.3k
NebulaFooter
Footer

Author:
Juraj

4 months ago

513
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

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

7 months ago

725
Newsletter Footer
Fully Responsive newsletter footer page

Author:
AKASH GANDHAR

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components