Tab border to align with full width border

Issue

I am trying to achieve something like this in HTML/CSS (TailwindCSS):

Notice how the border on the active tab aligns perfectly with the full-width border.

CODE:

Here is my HTML which includes the tailwind css classes.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="bg-slate-800 rounded-md mb-5 p-8">
    <ul class="flex items-center mb-4 border-b-2">
        <li class="p-4 border-b-2 border-red-500">
            <a href="" class="font-semibold block">First Tab</a>
        </li>
        <li class="p-4">
            <a href="" class="font-semibold block">Second Tab</a>
        </li>
        <li class="p-4">
            <a href="" class="font-semibold block">Third Tab</a>
        </li>
    </ul>
  <div>
    tab content
  </div>
</div>

Notice how the red border isn't perfectly aligned to the full-width border.

How can I get things perfectly aligned?

Solution

As the li is within the ui , so the when you apply border to li you push the entire ul, so giving a negative margin of the width of border of ul to li i.e 2px fixes this problem.

Just add -mb-[2px] in the active div

<div class=" rounded-md mb-5 p-8">
  <ul class="flex items-center mb-4 border-b-2">
    <li class="p-4 border-b-2 border-red-500 -mb-[2px]">
      <a href="" class="font-semibold  ">
        First Tab
      </a>
    </li>
    <li class="p-4 ">
      <a href="" class="font-semibold ">
        Second Tab
      </a>
    </li>
    <li class="p-4">
      <a href="" class="font-semibold ">
        Third Tab
      </a>
    </li>
  </ul>
  <div>tab content</div>
</div>

Before

After

Answered By - Krishna Acharya