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

920

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

Small Footer

Author:
Abhijit Sen

2 years ago

11.4k
Simple footer

Author:
threehymns

1 year ago

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

6 months ago

1.2k
Big footer with lots of links

Author:
Henrik R.

1 year ago

3.4k
Footer
Simple Dark footer

Author:
KULDEEP

2 months ago

341
Standard footer
You can use this example for five column footer with social media accounts, sitemap links, copyright notice and brand logo.

Author:
Pagedone

1 year ago

2.1k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.4k
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
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

2 years ago

11.2k
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
footer

Author:
Anonymous

4 months ago

1.3k
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components