Home
Matti
Footer

Footer

A simple footer with link adjustment for smartphones

This tailwind example is contributed by Matti, on 02-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Footer

Author Matti

652

Fork Fullscreen

<footer class="w-full py-6 text-gray-700 dark:bg-gray-800 dark:text-white">
    <div class="w-full px-3 md:!px-0 md:w-3/4 mx-auto flex flex-col md:flex-row">
        <div class="w-full md:w-2/5">
            <div class="flex flex-col">
                <div class="flex flex-row">
                  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="36" height="36" viewBox="0 0 48 48"><path fill="#059669" d="M2.141 34l3.771 6.519.001.001C6.656 41.991 8.18 43 9.94 43l.003 0 0 0h25.03l-5.194-9H2.141zM45.859 34.341c0-.872-.257-1.683-.697-2.364L30.977 7.319C30.245 5.94 28.794 5 27.124 5h-7.496l21.91 37.962 3.454-5.982C45.673 35.835 45.859 35.328 45.859 34.341zM25.838 28L16.045 11.038 6.252 28z"></path></svg>
                  <h1 class="font-semibold ml-2">Contoso</h1>
                </div>
                <p class="text-sm ml-11 -mt-4">Your qualified Business partner</p>
                <p class="text-sm mt-4 w-full md:max-w-[90%] xl:max-w-[78%]">
                  We provide you a perfect service with adjustment of your imagines. Get in contact to find out more about it. If you like the created components follow for more or make them as favorite.
                </p>
            </div>
        </div>
        <div class="w-full md:w-1/5 flex flex-col mt-8 md:!mt-0">
            <span class="font-semibold uppercase mb-3 dark:text-gray-600">Navigate</span>
            <ul class="flex flex-row md:!flex-col">
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Home</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Services</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Team</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Contact</a></li>
            </ul>
        </div>
        <div class="w-full md:w-1/5 flex flex-col mt-4 md:!mt-0">
            <span class="font-semibold uppercase mb-3 dark:text-gray-600">Help options</span>
            <ul class="flex flex-row md:!flex-col">
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Frequently Asked</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Downloads</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Documentations</a></li>
            </ul>
        </div>
        <div class="w-full md:w-1/5 flex flex-col mt-4 md:!mt-0">
            <span class="font-semibold uppercase mb-3 dark:text-gray-600">Navigate</span>
            <ul class="flex flex-row md:!flex-col">
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Imprint</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Privacy</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Terms &amp; Conditions</a> <span class="text-sm md:hidden lg:hidden">&nbsp;&#124;&nbsp;</span></li>
              <li class="mb-2"><a href="#" class="hover:text-emerald-600">Trademarks</a></li>
            </ul>
        </div>
    </div>
    <div class="w-full px-4 md:!px-0 md:w-3/4 mx-auto text-sm flex flex-col md:flex-row">
      <div class="w-full md:w-2/3 text-gray-500 mt-3 md:mt-5">
        &copy;2024 Contoso.com &#183; All rights reserved.<br />
        <span class="text-[90%]">All third-party product, company names and logos are trademarks™ or registered® trademarks and remain the property of their respective holders.</span>
      </div>
      <div class="w-full md:w-1/3 text-gray-200 dark:text-gray-700 mt-3 md:mt-5 md:text-end">
        Template created by Matti<br />
        The component was shared on tailwindflex.com and is free to use and modify.
      </div>
    </div>
</footer>

Related Examples

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

1.7k
portifolio
skills

Author:
ishimwe prince

1 week ago

23
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

5 months ago

601
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.2k
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

1 year ago

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

1 year ago

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

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

3 months ago

511
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

3 months ago

387
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 months ago

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

Author:
Pagedone

1 year ago

2.2k
Dark Footer with newsletter
Use Following Footer for dark vsersion of your website with newsletter, social icons and site links.

Author:
Pagedone

1 year ago

2.1k
Footer for blog
https://github.com/tailwindow/component

Author:
Prem..

2 years ago

16.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components