Tailwind CSS Footer

Use our Tailwind CSS Footer to provide additional information, navigation options, and useful links.

The footer component usually includes copyright information, contact details, links to privacy policies and terms of service, social media icons, and navigation links to other web pages. The purpose of this component is to improve user experience by offering easy access to important information within the website or application.

See below our footer component examples to help you get started more easily with your Material Tailwind project.


Footer Examples:

Default Footer

Use this simple example of a footer component that contains a list of navigation links (About Us, License, Contribute, Contact Us) designed for user convenience. It also includes a copyright notice (© 2023 Material Tailwind), indicating the copyright year and the entity it belongs to.

<footer
  class="flex flex-row flex-wrap items-center justify-center w-full py-6 text-center border-t gap-y-6 gap-x-12 border-blue-gray-50 md:justify-between">
  <p class="block font-sans text-base antialiased font-normal leading-relaxed text-blue-gray-900">
    © 2023 Material Tailwind
  </p>
  <ul class="flex flex-wrap items-center gap-y-2 gap-x-8">
    <li>
      <a href="#"
        class="block font-sans text-base antialiased font-normal leading-relaxed transition-colors text-blue-gray-900 hover:text-blue-500 focus:text-blue-500">
        About Us
      </a>
    </li>
    <li>
      <a href="#"
        class="block font-sans text-base antialiased font-normal leading-relaxed transition-colors text-blue-gray-900 hover:text-blue-500 focus:text-blue-500">
        License
      </a>
    </li>
    <li>
      <a href="#"
        class="block font-sans text-base antialiased font-normal leading-relaxed transition-colors text-blue-gray-900 hover:text-blue-500 focus:text-blue-500">
        Contribute
      </a>
    </li>
    <li>
      <a href="#"
        class="block font-sans text-base antialiased font-normal leading-relaxed transition-colors text-blue-gray-900 hover:text-blue-500 focus:text-blue-500">
        Contact Us
      </a>
    </li>
  </ul>
</footer>

Footer with logo

Use this example of footer styled with Tailwind CSS if you want to include your company's logo. The footer has a clean and minimalistic design with a white background (bg-white) throughout, including the Flexbox container.

Footer with Social Links

Use this footer example if you are looking for a more complex and information-rich layout. It utilizes a grid system for organization and offers a variety of links and resources. It also includes social media icons that are styled to blend with the footer's design, featuring hover effects (hover:opacity-100) that encourage interaction.

Footer with Sitemap

This footer example showcases a comprehensive and structured approach to organizing footer content across a wide website or platform. It makes use of a grid layout to distribute information into distinct sections, enhancing readability and navigation for the user.

Footer UI Component Best Practices For Developers

• Avoid cluttering the footer with too much information.
• Ensure the footer is accessible to all users, including those using screen readers or other assistive technologies.
• Ensure that the footer does not significantly impact the site's load time.