Tailwind CSS bottom navigation tabs component free download

The bottom navigation tab bar is a commonly used component. It is seen in many apps and websites. I was developing a website with Tailwind CSS which needed a bottom navigation bar and I was able to do it quickly in just a few lines of code. This is how it looks 👇🏻

Tailwind CSS bottom navigation tabs example

If you are looking for a free download of the bottom navigation tab bar component then you are at the right place.

Tailwind CSS bottom navigation tabs component cover

Checkout the full source code for the bottom tab bar for a mobile website made using Tailwind CSS

<div
    class="flex h-14 justify-around border-t border-gray-200 bg-white shadow-lg"
  >
    <div class="flex flex-col items-center justify-center text-gray-950">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="{1.5}"
        stroke="currentColor"
        class="h-6 w-6"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
        />
      </svg>
      <div class="text-sm">Home</div>
    </div>
    <div class="flex flex-col items-center justify-center text-gray-950">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="{1.5}"
        stroke="currentColor"
        class="h-6 w-6"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
        />
      </svg>
      <div class="text-sm">Categories</div>
    </div>
    <div class="flex flex-col items-center justify-center text-gray-950">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="{1.5}"
        stroke="currentColor"
        class="h-6 w-6"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
        />
      </svg>
      <div class="text-sm">Categories</div>
    </div>
    <div class="flex flex-col items-center justify-center text-gray-950">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="{1.5}"
        stroke="currentColor"
        class="h-6 w-6"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
        />
      </svg>

      <div class="text-sm">Account</div>
    </div>
  </div>

Tailwind CSS bottom navigation demo

Here’s an example usage demo for the bottom navigation bar in Tailwind Play – Bottom navigation tabs demo tailwind

Conclusion

This is an HTML example but it works for react as well. Just replace the word “class” with “className” in the above code and you’ll be able to use it in ReactJS websites, NextJS, or Gatsby websites as well!

Also read, Furniture App – React Native – Speed Code