Tab Full width Tab

            
<div class="space-y-5">
  <div class="border-b border-b-gray-100">
    <ul class="-mb-px flex items-center gap-4 text-sm font-medium">
      <li class="flex-1">
        <a href="#" class="relative flex items-center justify-center gap-2 px-1 py-3 text-primary-700 after:absolute after:left-0 after:bottom-0 after:h-0.5 after:w-full after:bg-primary-700 hover:text-primary-700"> Profile</a>
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 px-1 py-3 text-gray-500 hover:text-primary-700"> Preferences</a>
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 px-1 py-3 text-gray-500 hover:text-primary-700">
          Notifications
          <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-semibold text-gray-500"> 8 </span></a
        >
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 px-1 py-3 text-gray-500 hover:text-primary-700"> Applications</a>
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 px-1 py-3 text-gray-500 hover:text-primary-700">API</a>
      </li>
    </ul>
  </div>
  <div>
    <ul class="flex items-center gap-2 text-sm font-medium">
      <li class="flex-1">
        <a href="#" class="relative flex items-center justify-center gap-2 rounded-lg bg-gray-100 px-3 py-2 text-gray-700 hover:text-gray-700"> Profile</a>
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:bg-gray-50 hover:text-gray-700"> Preferences</a>
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:bg-gray-50 hover:text-gray-700">
          Notifications
          <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-semibold text-gray-500"> 8 </span></a
        >
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:bg-gray-50 hover:text-gray-700"> Applications</a>
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:bg-gray-50 hover:text-gray-700"> API</a>
      </li>
    </ul>
  </div>
  <div class="overflow-hidden rounded-xl border border-gray-100 bg-gray-50 p-1">
    <ul class="flex items-center gap-2 text-sm font-medium">
      <li class="flex-1">
        <a href="#" class="text-gra relative flex items-center justify-center gap-2 rounded-lg bg-white px-3 py-2 shadow hover:bg-white hover:text-gray-700"> Profile</a>
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:bg-white hover:text-gray-700 hover:shadow"> Preferences</a>
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:bg-white hover:text-gray-700 hover:shadow">
          Notifications
          <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-semibold text-gray-500"> 8 </span></a
        >
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:bg-white hover:text-gray-700 hover:shadow"> Applications</a>
      </li>
      <li class="flex-1">
        <a href="#" class="flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:bg-white hover:text-gray-700 hover:shadow"> API</a>
      </li>
    </ul>
  </div>
</div>