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

831

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

Footer blue theme

Author:
Leon Bachmann

2 years ago

13.2k
Responsive footer
Standard footer format

Author:
Emre Yılmaz

1 year ago

3.1k
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.5k
less is more
less is more by salvator

Author:
Baraka Salvator

2 months ago

562
Big footer with lots of links

Author:
Henrik R.

1 year ago

3.4k
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

1 month ago

361
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

1 year ago

2.5k
Footer with gallery
Use this example if you want to add gallery of images into your footer with brand logo, sitemap links and copyright notice.

Author:
Pagedone

1 year ago

2.3k
Footer (Tailwind UI)

Author:
Gopi Yadav

2 years ago

12.2k
Newsletter with address location
Use this example to first show brand logo card, then show address locations of your company, a newsletter sign-up form.

Author:
Pagedone

1 year ago

2.4k
Footer - Htmlwind
Simple centerd footer

Author:
Htmlwind

3 months ago

384
Centered footer with subscribe form
Use this example to center align everything in footer with brand logo, sitemap links and subscribe form.

Author:
Pagedone

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components