How to align the navbar items to right corner in tailwind

Question

<div class="flex md:flex md:flex-grow flex-row-reverse space-x-1">
  <a href="" class="py-4 px-2 text-teal-500 border-b-4 border-teal-300 font-semibold">Home</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Services</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">About</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Contact Us</a>
</div>

What changes need to be made?

Answer 1

To align your item to the right, you need to justify your flex items to the end by using justify-end inside your flex container.

You can also align your nav-bar items to the right side by changing flex-row to flex-row-reverse. This way, you get both variations of the items' order.

Code:

<div class="flex md:flex md:flex-grow flex-row justify-end space-x-1">
  <a href="" class="py-4 px-2 text-teal-500 border-b-4 border-teal-300 font-semibold">Home</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Services</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">About</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Contact Us</a>
</div>

<!-- or -->

<div class="flex md:flex md:flex-grow flex-row-reverse space-x-1">
  <a href="" class="py-4 px-2 text-teal-500 border-b-4 border-teal-300 font-semibold">Home</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Services</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">About</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Contact Us</a>
</div>

Tailwind-play: justify-end, flex-row-reverse.