Tab Tab in pills with color

            
<div x-data="{ activeTab:  0 }">
  <ul class="flex items-center gap-2 text-sm font-medium">
    <li>
      <a @click="activeTab = 0" :class="{ 'bg-primary-100 text-primary-700 hover:!bg-primary-100': activeTab === 0 }" class="relative inline-flex cursor-pointer items-center gap-2 rounded-lg  px-3 py-2 hover:bg-primary-50  hover:text-primary-700"> Profile</a>
    </li>
    <li>
      <a @click="activeTab = 1" :class="{ 'bg-primary-100 text-primary-700 hover:!bg-primary-100': activeTab === 1 }" class="relative inline-flex cursor-pointer items-center gap-2 rounded-lg  px-3 py-2 hover:bg-primary-50 hover:text-primary-700"> Preferences</a>
    </li>
    <li>
      <a @click="activeTab = 2" :class="{ 'bg-primary-100 text-primary-700 hover:!bg-primary-100': activeTab === 2 }" class="relative inline-flex cursor-pointer items-center gap-2 rounded-lg  px-3 py-2 hover:bg-primary-50 hover:text-primary-700">
        Notifications
        <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-semibold text-gray-500 group-hover:bg-primary-100 group-hover:text-primary-700"> 8 </span></a
      >
    </li>
    <li>
      <a @click="activeTab = 3" :class="{ 'bg-primary-100 text-primary-700 hover:!bg-primary-100': activeTab === 3 }" class="relative inline-flex cursor-pointer items-center gap-2 rounded-lg  px-3 py-2 hover:bg-primary-50 hover:text-primary-700"> Applications</a>
    </li>
    <li>
      <a @click="activeTab = 4" :class="{ 'bg-primary-100 text-primary-700 hover:!bg-primary-100': activeTab === 4 }" class="relative inline-flex cursor-pointer items-center gap-2 rounded-lg  px-3 py-2 hover:bg-primary-50 hover:text-primary-700"> API</a>
    </li>
  </ul>
  <div class="py-3">
    <div :class="{ '!block': activeTab === 0 }" x-show.transition.in.opacity.duration.600="activeTab === 0" class="hidden">Tab content 1</div>
    <div :class="{ '!block': activeTab === 1 }" x-show.transition.in.opacity.duration.600="activeTab === 1" class="hidden">Tab content 2</div>
    <div :class="{ '!block': activeTab === 2 }" x-show.transition.in.opacity.duration.600="activeTab === 2" class="hidden">Tab content 3</div>
    <div :class="{ '!block': activeTab === 3 }" x-show.transition.in.opacity.duration.600="activeTab === 3" class="hidden">Tab content 4</div>
    <div :class="{ '!block': activeTab === 4 }" x-show.transition.in.opacity.duration.600="activeTab === 4" class="hidden">Tab content 5</div>
  </div>
</div>