Tabs and pills

<div class="w-full">
  <!--
    Play with the "justify" value to start from left, center, and right with
    values of "justify-start", "justify-center", and "justify-end"
  -->
  <nav class="border-b text-sm flex justify-start">
    <a class="inline-block px-4 py-2 text-gray-700 hover:text-black" href="#">Tab 1</a>

    <!-- active -->
    <a class="inline-block px-4 py-2 border-b-2 border-indigo-600 text-indigo-600 font-semibold" href="#">Tab 2</a>

    <a class="inline-block px-4 py-2 text-gray-700 hover:text-black" href="#">Tab 3</a>
    <a class="inline-block px-4 py-2 text-gray-700 hover:text-black" href="#">Tab 4</a>
  </nav>

  <br />
  <br />
  <br />

  <nav class="border-b text-sm flex justify-center">
    <a class="inline-block px-4 py-2 text-gray-700 hover:text-black" href="#">Tab 1</a>

    <!-- active -->
    <a class="inline-block px-4 py-2 border-b-2 border-indigo-600 text-indigo-600 font-semibold" href="#">Tab 2</a>

    <a class="inline-block px-4 py-2 text-gray-700 hover:text-black" href="#">Tab 3</a>
    <a class="inline-block px-4 py-2 text-gray-700 hover:text-black" href="#">Tab 4</a>
  </nav>

  <br />
  <br />
  <br />

  <nav class="border-b text-sm flex justify-end">
    <a class="inline-block px-4 py-2 text-gray-700 hover:text-black" href="#">Tab 1</a>

    <!-- active -->
    <a class="inline-block px-4 py-2 border-b-2 border-indigo-600 text-indigo-600 font-semibold" href="#">Tab 2</a>

    <a class="inline-block px-4 py-2 text-gray-700 hover:text-black" href="#">Tab 3</a>
    <a class="inline-block px-4 py-2 text-gray-700 hover:text-black" href="#">Tab 4</a>
  </nav>
</div>