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

Footer

Author Matti

Tailwind v3.4 1.9k 8

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

admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Lekhraj Ghimire

1 year ago

2.4k
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
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Homayoun

9 months ago

1.2k
portifolio
skills

ishimwe prince

1 year ago

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

Pagedone

2 years ago

3k
Simple footer with CTA Button
You can use this simple footer as a base for any type of websites. It includes a single CTAs button that you can customize according to your requirement.

Pagedone

2 years ago

2.6k
NebulaFooter
Footer

Juraj

1 year ago

1.6k
Responsive Footer

ariaw

1 year ago

3.1k
Very simple footer

Arya

3 years ago

13.8k
Footer version Ousmane
Ce footer est associer a un menu de navigation qui apparait sous le mobile donc avec sa plus besoin de gerer les menus sous le mobile.

Ousmane CISSE

11 months ago

558
Footer with background
Apply background color to your footer to provide immense look of footer area.

Pagedone

2 years ago

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

Maxim

1 year ago

2.3k