tabs

<section>
  <div class="relative px-8 py-12 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div x-data="{ tab: 'tab1' }">
      <ul class="flex gap-4 text-sm text-gray-500 border-b">
        <li class="-mb-px">
          <a
            @click.prevent="tab = 'tab1'"
            href="#_"
            class="inline-block py-2 font-medium bg-white text-blue-500 border-b-2 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-gray-500">
          <main class="py-4">
            <p class="text-gray-500 text-sm">Marketing content</p>
          </main>
        </div>
        <div x-show="tab==='tab2'" class="text-gray-500" style="display: none">
          <main class="py-4">
            <p class="text-gray-500 text-sm">Application content</p>
          </main>
        </div>
        <div x-show="tab==='tab3'" class="text-gray-500" style="display: none">
          <main class="py-4">
            <p class="text-gray-500 text-sm">ECommerce content</p>
          </main>
        </div>
      </div>
    </div>
  </div>
</section>