Tabs

<div x-data="{ tab: 0 }">
  <div class="tab-list">
    <ul class="tab-list-inner">
      <li>
        <a @click="tab = 0" class="tab-item" :class="tab === 0 && 'tab-item-active'">
          Profile
        </a>
      </li>
      <li>
        <a @click="tab = 1" class="tab-item" :class="tab === 1 && 'tab-item-active'">
          Notifications <span class="tab-badge">8</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="tab-panel">
    <div x-show="tab === 0">Profile content.</div>
    <div x-show="tab === 1">Notifications content.</div>
  </div>
</div>