tabs

              <div x-data="{ tab: 'tab1' }">
  <ul class="flex text-sm border-b gap-4 text-zinc-500 border-zinc-200">
    <li class="-mb-px">
      <a
        @click.prevent="tab = 'tab1'"
        href="#_"
        class="inline-block py-2 font-medium bg-white border-b-2 text-blue-500 border-blue-500"
        :class="{ ' bg-white text-blue-500 border-b-2 border-blue-500' : tab === 'tab1' }"
      >
        Marketing</a
      >
    </li>
    <li class="-mb-px">
      <a
        @click.prevent="tab = 'tab2'"
        href="#_"
        class="inline-block py-2 font-medium"
        :class="{ ' bg-white text-blue-500 border-b-2 border-blue-500' : tab === 'tab2' }"
      >
        Application</a
      >
    </li>
    <li class="-mb-px">
      <a
        @click.prevent="tab = 'tab3'"
        href="#_"
        class="inline-block py-2 font-medium"
        :class="{ ' bg-white text-blue-500 border-b-2 border-blue-500' : tab === 'tab3' }"
      >
        ECommerce</a
      >
    </li>
  </ul>
  <div class="py-4 pt-4 text-left bg-white content">
    <div x-show="tab==='tab1'" class="text-zinc-500">
      <main class="py-4">
        <p class="text-sm text-zinc-500">Marketing content</p>
      </main>
    </div>
    <div x-show="tab==='tab2'" class="text-zinc-500" style="display: none">
      <main class="py-4">
        <p class="text-sm text-zinc-500">Application content</p>
      </main>
    </div>
    <div x-show="tab==='tab3'" class="text-zinc-500" style="display: none">
      <main class="py-4">
        <p class="text-sm text-zinc-500">ECommerce content</p>
      </main>
    </div>
  </div>
</div>