Published on

Practical Guide: Create A Footer With Tailwind CSS

Tags
Navigations
footer

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that helps developers create responsive and customizable user interfaces with ease. It provides a set of pre-defined CSS classes that can be used to style various HTML elements. Tailwind CSS is highly configurable and can be customized to meet the needs of any project.

A footer is an important UI component that provides users with information about the website or application they are using. It is usually located at the bottom of the page and contains links to important pages, copyright information, and contact details. A well-designed footer can improve the user experience and make it easier for users to navigate the site.

Tailwind CSS makes it easy to create a footer UI component that is both responsive and customizable. It provides a set of pre-defined classes that can be used to style various elements of the footer, such as the background color, font size, and padding. Tailwind CSS also makes it easy to create responsive footers that look great on any device.

Creating a footer with Tailwind CSS is easy. Here is a preview of what the final product will look like:

Free download of the footer's source code

Here is the source code for the footer UI component created with Tailwind CSS:

<div class="mb-16">
  <footer class="text-gray-600 body-font bg-gray-700">
    <div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
      <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
        <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-white p-2 bg-red-700 rounded-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
          </svg>
          <span class="ml-3 text-xl text-white">DEV</span>
        </a>
        <p class="mt-2 text-sm text-white">Air plant banjo lyft occupy retro adaptogen indego</p>
      </div>
      <div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-bold text-white tracking-widest text-md mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a class="text-white hover:text-red-300" href="#">First Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Second Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Third Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Fourth Link</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-bold text-white tracking-widest text-md mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a class="text-white hover:text-red-300" href="#">First Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Second Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Third Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Fourth Link</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-bold text-white tracking-widest text-md mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a class="text-white hover:text-red-300" href="#">First Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Second Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Third Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Fourth Link</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-bold text-white tracking-widest text-md mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a class="text-white hover:text-red-300" href="#">First Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Second Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Third Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Fourth Link</a>
            </li>
          </nav>
        </div>
      </div>
    </div>
    <div class="bg-gray-900">
      <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
        <p class="text-white text-sm text-center sm:text-left">© 2020 Dev —
          <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-400 ml-1" target="_blank">@Developer</a>
        </p>
        <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
          <a class="text-gray-200">
            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
              <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
            </svg>
          </a>
          <a class="ml-3 text-gray-200">
            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
              <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
            </svg>
          </a>
          <a class="ml-3 text-gray-200">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
              <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
            </svg>
          </a>
          <a class="ml-3 text-gray-200">
            <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
              <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
              <circle cx="4" cy="4" r="2" stroke="none"></circle>
            </svg>
          </a>
        </span>
      </div>
    </div>
  </footer>
</div>

<div class="">
  <footer class="text-gray-600 body-font bg-indigo-700">
    <div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
      <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
        <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-white p-2 bg-pink-600 rounded-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
          </svg>
          <span class="ml-3 text-xl text-white">DEV</span>
        </a>
        <p class="mt-2 text-sm text-white">Air plant banjo lyft occupy retro adaptogen indego</p>
      </div>
      <div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-bold text-white tracking-widest text-md mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a class="text-white hover:text-red-300" href="#">First Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Second Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Third Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Fourth Link</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-bold text-white tracking-widest text-md mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a class="text-white hover:text-red-300" href="#">First Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Second Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Third Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Fourth Link</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-bold text-white tracking-widest text-md mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a class="text-white hover:text-red-300" href="#">First Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Second Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Third Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Fourth Link</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-bold text-white tracking-widest text-md mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a class="text-white hover:text-red-300" href="#">First Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Second Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Third Link</a>
            </li>
            <li>
              <a class="text-white hover:text-red-300" href="#">Fourth Link</a>
            </li>
          </nav>
        </div>
      </div>
    </div>
    <div class="bg-indigo-900">
      <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
        <p class="text-white text-sm text-center sm:text-left">© 2020 Dev —
          <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-400 ml-1" target="_blank">@Developer</a>
        </p>
        <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
          <a class="text-gray-200">
            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
              <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
            </svg>
          </a>
          <a class="ml-3 text-gray-200">
            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
              <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
            </svg>
          </a>
          <a class="ml-3 text-gray-200">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
              <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
            </svg>
          </a>
          <a class="ml-3 text-gray-200">
            <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
              <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
              <circle cx="4" cy="4" r="2" stroke="none"></circle>
            </svg>
          </a>
        </span>
      </div>
    </div>
  </footer>
</div>

To create a footer with Tailwind CSS, follow these steps:

Step 1: Create the HTML markup

The first step is to create the HTML markup for the footer. Here is an example:

<footer class="bg-gray-800 text-white">
  <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
    <div class="flex-grow">
      <h1 class="text-xl font-bold mb-2">My Website</h1>
      <p class="text-sm">© 2021 My Website. All rights reserved.</p>
    </div>
    <div>
      <a href="#" class="text-white hover:text-gray-400 px-3 py-2 rounded">Home</a>
      <a href="#" class="text-white hover:text-gray-400 px-3 py-2 rounded">About</a>
      <a href="#" class="text-white hover:text-gray-400 px-3 py-2 rounded">Contact</a>
    </div>
  </div>
</footer>

In this example, we have used the bg-gray-800 class to set the background color of the footer to gray, and the text-white class to set the text color to white. We have also used the container class to center the content of the footer and the py-4 and px-5 classes to add padding to the top, bottom, left, and right of the footer.

The next step is to style the footer using Tailwind CSS classes. Here is an example:

<footer class="bg-gray-800 text-white">
  <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
    <div class="flex-grow">
      <h1 class="text-xl font-bold mb-2">My Website</h1>
      <p class="text-sm">© 2021 My Website. All rights reserved.</p>
    </div>
    <div>
      <a href="#" class="text-white hover:text-gray-400 px-3 py-2 rounded">Home</a>
      <a href="#" class="text-white hover:text-gray-400 px-3 py-2 rounded">About</a>
      <a href="#" class="text-white hover:text-gray-400 px-3 py-2 rounded">Contact</a>
    </div>
  </div>
</footer>

In this example, we have used the bg-gray-800 class to set the background color of the footer to gray, and the text-white class to set the text color to white. We have also used the container class to center the content of the footer and the py-4 and px-5 classes to add padding to the top, bottom, left, and right of the footer.

Step 3: Add responsive classes

The final step is to add responsive classes to the footer to make it look great on any device. Here is an example:

<footer class="bg-gray-800 text-white">
  <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
    <div class="flex-grow">
      <h1 class="text-xl font-bold mb-2">My Website</h1>
      <p class="text-sm">© 2021 My Website. All rights reserved.</p>
    </div>
    <div class="mt-4 sm:mt-0">
      <a href="#" class="text-white hover:text-gray-400 px-3 py-2 rounded">Home</a>
      <a href="#" class="text-white hover:text-gray-400 px-3 py-2 rounded">About</a>
      <a href="#" class="text-white hover:text-gray-400 px-3 py-2 rounded">Contact</a>
    </div>
  </div>
</footer>

In this example, we have used the mt-4 class to add margin to the top of the second div on small screens, and the sm:mt-0 class to remove the margin on larger screens.

Conclusion

Creating a footer with Tailwind CSS is easy and can be done in just a few steps. By using Tailwind CSS, you can create a responsive and customizable footer that looks great on any device. With its pre-defined classes and highly configurable nature, Tailwind CSS is a great choice for creating UI components like footers.