Tab Tab in pills

            
<div x-data="{ activeTab:  0 }">
  <ul class="flex items-center gap-2 text-sm font-medium">
    <li>
      <a @click="activeTab = 0" class="inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:text-gray-700" :class="{ 'bg-gray-100 text-gray-700 hover:bg-gray-100': activeTab === 0 }"> Profile</a>
    </li>
    <li>
      <a @click="activeTab = 1" class="inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:text-gray-700" :class="{ 'bg-gray-100 text-gray-700 hover:bg-gray-100': activeTab === 1 }"> Preferences</a>
    </li>
    <li>
      <a @click="activeTab = 2" class="inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:text-gray-700" :class="{ 'bg-gray-100 text-gray-700 hover:bg-gray-100': activeTab === 2 }">
        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>
      <a @click="activeTab = 3" class="inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:text-gray-700" :class="{ 'bg-gray-100 text-gray-700 hover:bg-gray-100': activeTab === 3 }"> Applications</a>
    </li>
    <li>
      <a @click="activeTab = 4" class="inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-500 hover:text-gray-700" :class="{ 'bg-gray-100 text-gray-700 hover:bg-gray-100': activeTab === 4 }"> 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>