Published on

Beginners Guide: Make A Simple Footer With Tailwind CSS

Tags
Cards
Simple Footer

As a beginner in FrontEnd technology, it can be challenging to create a simple footer for your website. However, with the help of Tailwind CSS, you can easily create a simple footer that looks professional and adds value to your site. In this article, we will guide you through the process of creating a simple footer using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to help you style your website. It is designed to make it easier for developers to create responsive and customizable user interfaces. With Tailwind CSS, you can easily create complex layouts and designs without writing custom CSS code.

A footer is an essential part of any website. It is the section that appears at the bottom of the page and contains information about the website, such as copyright information, contact details, and links to social media profiles. A simple footer UI component is a basic footer that contains only the essential information and links.

Tailwind CSS provides a set of pre-defined classes that can be used to create a simple footer quickly. It eliminates the need to write custom CSS code, making it easier for beginners to create a professional-looking footer. Additionally, Tailwind CSS is responsive, which means that the footer will adjust to different screen sizes, making it accessible to a wider audience.

To create a simple footer using Tailwind CSS, we will use a set of pre-defined classes to style the footer. The footer will contain the following elements:

  • A logo
  • Copyright information
  • Links to social media profiles

Free download of the Simple Footer's source code

To create a simple footer using Tailwind CSS, you will need to add the following HTML code to your website:

<!-- This is an example component -->
<div class="bg-gray-900">
    <footer class="flex flex-wrap items-center justify-between p-3 m-auto">
        <div class="container mx-auto flex flex-col flex-wrap items-center justify-between">
            <ul class="flex mx-auto text-white text-center">
              <li class="p-2 cursor-pointer hover:underline">Terms & Conditions</li>
              <li class="p-2 cursor-pointer hover:underline">Privacy</li>
              <li class="p-2 cursor-pointer hover:underline">Cookies</li>
            </ul>
            <ul class="flex mx-auto text-white text-center">
              <li class="p-2 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-white" width="24" height="24" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg></li>
              <li class="p-2 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-white" width="24" height="24" viewBox="0 0 24 24"><path d="M21.231 0h-18.462c-1.529 0-2.769 1.24-2.769 2.769v18.46c0 1.531 1.24 2.771 2.769 2.771h18.463c1.529 0 2.768-1.24 2.768-2.771v-18.46c0-1.529-1.239-2.769-2.769-2.769zm-9.231 7.385c2.549 0 4.616 2.065 4.616 4.615 0 2.549-2.067 4.616-4.616 4.616s-4.615-2.068-4.615-4.616c0-2.55 2.066-4.615 4.615-4.615zm9 12.693c0 .509-.413.922-.924.922h-16.152c-.511 0-.924-.413-.924-.922v-10.078h1.897c-.088.315-.153.64-.2.971-.05.337-.081.679-.081 1.029 0 4.079 3.306 7.385 7.384 7.385s7.384-3.306 7.384-7.385c0-.35-.031-.692-.081-1.028-.047-.331-.112-.656-.2-.971h1.897v10.077zm0-13.98c0 .509-.413.923-.924.923h-2.174c-.511 0-.923-.414-.923-.923v-2.175c0-.51.412-.923.923-.923h2.174c.511 0 .924.413.924.923v2.175z" fillRule="evenodd" clipRule="evenodd"/></svg></li>
              <li class="p-2 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-white" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></li>
            </ul>
            <div class="flex mx-auto text-white text-center">
                Copyright Business Name © 2021
            </div>
        </div>
    </footer>
</div>

To create a simple footer using Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the following code to the body section:
<footer class="bg-gray-800">
  <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
    <a href="/" class="flex title-font font-medium items-center md:justify-start justify-center text-white">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
        <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
        <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
        <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
        <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
        <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
        <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
        <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
        <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
      </svg>
      <span class="ml-3 text-xl">Tailwind CSS</span>
    </a>
    <p class="text-white sm:ml-6 sm:mt-0 mt-4">© 2021 Tailwind CSS —
      <a href="https://twitter.com/tailwindcss" class="text-indigo-400 ml-1" rel="noopener noreferrer" target="_blank">@tailwindcss</a>
    </p>
    <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
      <a class="text-white hover:text-indigo-400 mx-3" href="#">
        <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
          <path d="M22.12 5.05A10 10 0 0 0 12 2a10 10 0 0 0-8.06 4.05A10 10 0 0 0 2 12a10 10 0 0 0 4.05 8.06A10 10 0 0 0 12 22a10 10 0 0 0 8.06-4.05A10 10 0 0 0 22 12a10 10 0 0 0-4.05-8.06zM16 12l-4 4m0-8l4 4m-8 0h8"></path>
        </svg>
      </a>
      <a class="text-white hover:text-indigo-400 mx-3" href="#">
        <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
          <path d="M22.59 12c0 5.25-4.28 9.53-9.53 9.53S3.53 17.25 3.53 12 7.81 2.47 13.06 2.47c.59 0 1.18.03 1.76.09a4 4 0 0 1 3.84 3.84c.06.58.09 1.17.09 1.76z"></path>
          <path d="M22.59 12H22.6"></path>
          <path d="M16.82 19.29a9 9 0 0 1-12.73 0"></path>
          <path d="M1.41 12c0-5.25 4.28-9.53 9.53-9.53S20.47 6.75 20.47 12 16.19 21.53 10.94 21.53c-.59 0-1.18-.03-1.76-.09a4 4 0 0 1-3.84-3.84c-.06-.58-.09-1.17-.09-1.76z"></path>
          <path d="M1.41 12H1.4"></path>
          <path d="M7.18 4.71a9 9 0 0 1 12.73 0"></path>
        </svg>
      </a>
      <a class="text-white hover:text-indigo-400 mx-3" href="#">
        <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.37V7a4 4 0 0 0-4-4 4 4 0 0 0-4 4v4.37"></path>
          <line x1="8" y1="21" x2="16" y2="21"></line>
          <line x1="12" y1="17" x2="12" y2="21"></line>
        </svg>
      </a>
      <a class="text-white hover:text-indigo-400 mx-3" href="#">
        <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="M0 0h24v24H0z"></path>
          <rect x="4" y="4" width="16" height="16" rx="3"></rect>
          <circle cx="12" cy="12" r="3"></circle>
          <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
        </svg>
      </a>
    </span>
  </div>
</footer>
  1. Save the file and open it in your web browser. You should see a simple footer at the bottom of the page.

Conclusion

Creating a simple footer using Tailwind CSS is an easy task that can be accomplished by following the steps outlined in this article. With the help of pre-defined classes, you can easily style your footer and make it look professional. Remember to experiment with different classes to create a footer that suits your website's design.