<div x-data="{activeTab:'tab-1'}">
  <div class="flex gap-4 md:gap-6 xl:gap-8">
    <button @click="activeTab='tab-1'" class="border-b pb-1 font-medium" :class="activeTab=='tab-1' ? 'border-neutral-900 dark:border-neutral-30':'border-transparent text-neutral-500 dark:text-neutral-40'">Item One</button>
    <button @click="activeTab='tab-2'" class="border-b pb-1 font-medium" :class="activeTab=='tab-2' ? 'border-neutral-900 dark:border-neutral-30':'border-transparent text-neutral-500 dark:text-neutral-40'">Item Two</button>
    <button @click="activeTab='tab-3'" class="border-b pb-1 font-medium" :class="activeTab=='tab-3' ? 'border-neutral-900 dark:border-neutral-30':'border-transparent text-neutral-500 dark:text-neutral-40'">Item Three</button>
  </div>
  <div x-show="activeTab=='tab-1'" class="mt-6">
    <div class="rounded-2xl border border-neutral-30 bg-neutral-0 px-6 py-4 dark:border-neutral-500 dark:bg-neutral-904">
      <p>Item One</p>
    </div>
  </div>
  <div x-show="activeTab=='tab-2'" class="mt-6">
    <div class="rounded-2xl border border-neutral-30 bg-neutral-0 px-6 py-4 dark:border-neutral-500 dark:bg-neutral-904">
      <p>Item Two</p>
    </div>
  </div>
  <div x-show="activeTab=='tab-3'" class="mt-6">
    <div class="rounded-2xl border border-neutral-30 bg-neutral-0 px-6 py-4 dark:border-neutral-500 dark:bg-neutral-904">
      <p>Item Three</p>
    </div>
  </div>
</div>
                  

<div x-data="{activeTab:'tab-1'}">
  <div class="flex gap-4 md:gap-6 xl:gap-8">
    <button @click="activeTab='tab-1'" class="border-b pb-1 font-medium" :class="activeTab=='tab-1' ? 'border-neutral-900 dark:border-neutral-30':'border-transparent text-neutral-500 dark:text-neutral-40'"><i class="las la-phone text-2xl"></i></button>
    <button @click="activeTab='tab-2'" class="border-b pb-1 font-medium" :class="activeTab=='tab-2' ? 'border-neutral-900 dark:border-neutral-30':'border-transparent text-neutral-500 dark:text-neutral-40'"><i class="lar la-heart text-2xl"></i></button>
    <button @click="activeTab='tab-3'" class="border-b pb-1 font-medium" :class="activeTab=='tab-3' ? 'border-neutral-900 dark:border-neutral-30':'border-transparent text-neutral-500 dark:text-neutral-40'"><i class="las la-headphones text-2xl"></i></button>
  </div>

  <div x-show="activeTab=='tab-1'" class="mt-6">
    <div class="rounded-2xl border border-neutral-30 bg-neutral-0 px-6 py-4 dark:border-neutral-500 dark:bg-neutral-904">
      <p>Item One</p>
    </div>
  </div>
  <div x-show="activeTab=='tab-2'" class="mt-6">
    <div class="rounded-2xl border border-neutral-30 bg-neutral-0 px-6 py-4 dark:border-neutral-500 dark:bg-neutral-904">
      <p>Item Two</p>
    </div>
  </div>
  <div x-show="activeTab=='tab-3'" class="mt-6">
    <div class="rounded-2xl border border-neutral-30 bg-neutral-0 px-6 py-4 dark:border-neutral-500 dark:bg-neutral-904">
      <p>Item Three</p>
    </div>
  </div>
</div>