Tab Tab with background

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