Published on

How To Make A simple footer With Tailwind CSS From Scratch

Tags
Navigations
simple footer

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to help you quickly build custom user interfaces. It allows you to create complex layouts and designs without writing custom CSS. Tailwind CSS is gaining popularity among developers because it is easy to use, highly customizable, and has a small learning curve.

A footer is a section of a web page that appears at the bottom of the page. It usually contains information such as copyright notices, links to social media, and contact information. A simple footer UI component is a basic design that can be used on any website. It is a minimalistic design that includes only essential information.

Tailwind CSS provides a set of pre-defined classes that can be used to create a simple footer UI component quickly. It eliminates the need to write custom CSS, which saves time and effort. Tailwind CSS also provides responsive classes that allow the footer to adjust its size and layout based on the screen size.

To create a simple footer UI component, we will use Tailwind CSS classes to style the HTML elements. The footer will contain a copyright notice, a link to the privacy policy, and a link to the terms of service.

Free download of the simple footer's source code

To create a simple footer UI component, we will use HTML and Tailwind CSS classes. The HTML code will contain a div element with a class of "footer" that will contain three anchor elements. The anchor elements will have classes of "text-gray-500", "hover:text-gray-900", and "ml-4". The "text-gray-500" class will set the text color to gray, the "hover:text-gray-900" class will change the text color to black when the mouse hovers over it, and the "ml-4" class will add a margin to the left of the anchor element.

<!-- This is an example component -->
<div class=" bg-gray-900">
    <div class="max-w-2xl mx-auto text-white py-10">
        <div class="text-center">
            <h3 class="text-3xl mb-3"> Download our fitness app </h3>
            <p> Stay fit. All day, every day. </p>
            <div class="flex justify-center my-10">
                <div class="flex items-center border w-auto rounded-lg px-4 py-2 w-52 mx-2">
                    <img src="https://cdn-icons-png.flaticon.com/512/888/888857.png" class="w-7 md:w-8">
                    <div class="text-left ml-3">
                        <p class='text-xs text-gray-200'>Download on </p>
                        <p class="text-sm md:text-base"> Google Play Store </p>
                    </div>
                </div>
                <div class="flex items-center border w-auto rounded-lg px-4 py-2 w-44 mx-2">
                    <img src="https://cdn-icons-png.flaticon.com/512/888/888841.png" class="w-7 md:w-8">
                    <div class="text-left ml-3">
                        <p class='text-xs text-gray-200'>Download on </p>
                        <p class="text-sm md:text-base"> Apple Store </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-28 flex flex-col md:flex-row md:justify-between items-center text-sm text-gray-400">
            <p class="order-2 md:order-1 mt-8 md:mt-0"> &copy; Beautiful Footer, 2021. </p>
            <div class="order-1 md:order-2">
                <span class="px-2">About us</span>
                <span class="px-2 border-l">Contact us</span>
                <span class="px-2 border-l">Privacy Policy</span>
            </div>
        </div>
    </div>
</div>
  1. Create a new HTML file and add the following code:
<footer class="bg-gray-200">
  <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
    <p class="text-gray-500 text-sm text-center sm:text-left">© 2021 My Website —
      <a href="#" rel="noopener noreferrer" class="text-gray-600 ml-1" target="_blank">@mywebsite</a>
    </p>
    <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
      <a href="#" class="text-gray-500">
        <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 2.59a2 2 0 0 0-2.83 0L12 9.17 5.24 2.41a2 2 0 0 0-2.83 0L.59 4.59a2 2 0 0 0 0 2.83L7.34 12 .59 18.76a2 2 0 0 0 0 2.83l2.83 2.83a2 2 0 0 0 2.83 0L12 14.83l6.76 6.76a2 2 0 0 0 2.83 0l2.83-2.83a2 2 0 0 0 0-2.83L16.66 12l6.76-6.76a2 2 0 0 0 0-2.83z"></path>
        </svg>
      </a>
      <a href="#" class="ml-3 text-gray-500">
        <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
          <path d="M17.657 6.343a8 8 0 1 1 0 11.314 8 8 0 0 1 0-11.314zM15 9a3 3 0 1 0-6 0 3 3 0 0 0 6 0zm-3.5 9.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path>
        </svg>
      </a>
      <a href="#" class="ml-3 text-gray-500">
        <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 8v8M8 8v8"></path>
        </svg>
      </a>
      <a href="#" class="ml-3 text-gray-500">
        <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 d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm3-9h-2v-2c0-.552-.448-1-1-1s-1 .448-1 1v2H9c-.552 0-1 .448-1 1s.448 1 1 1h2v2c0 .552.448 1 1 1s1-.448 1-1v-2h2c.552 0 1-.448 1-1s-.448-1-1-1z"></path>
        </svg>
      </a>
    </span>
  </div>
</footer>

  1. Save the file as "index.html".

  2. Open the file in your web browser to see the simple footer.

Conclusion

In this article, we learned how to create a simple footer UI component using Tailwind CSS. We discussed the benefits of using Tailwind CSS and how it can save time and effort when creating user interfaces. We also provided a preview and source code of the simple footer UI component. With Tailwind CSS, you can create custom user interfaces quickly and easily.