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 v3.4. It is responsive. It supports dark mode.

Footer

Author Matti

Tailwind v3.4 1.4k 3

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
Footer with contact info, navigation, account links, and social media icons.

Yasmin Rodrigues

2 years ago

3.8k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

938
Horizontal footer with light version
Use this example for simple horizontal layout of footer in light version with brand logo, sitemap links and social media accounts.

Pagedone

2 years ago

3.5k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

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

Pagedone

2 years ago

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

Pagedone

2 years ago

3.5k
Minimalist iOS 26 Foote
Minimalist iOS 26 Foote

Omer fils ELENGA

10 months ago

524
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

ishimwe prince

1 year ago

1.4k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Rathanak Phan

1 year ago

2.3k
Footer with social media icons
If you want to use colorful social media icons with address location, sitemap links and newsletter.

Pagedone

2 years ago

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

Abdul Jabbar Al Nahid

1 year ago

1.3k