Tabs

                  
<!-- Tabs default -->
<div x-data="{ tabs: 1 }" class="tabs flex ioajsklehsnm w-full sm:w-[360px]">
  <!-- tabs header -->
  <div class="relative flex layhetgsjdcb">
    <button @click="tabs = 1" :class="{ 'active bg-purple-500/50 text-white': tabs === 1 }"
      class="active w-1/3 sm:w-[120px] py-3 uajskeiolksb flex layhetgsjdcb yhansklopals gap-2 relative hover:bg-purple-500/50 hover:text-white">
      <span class="bi bi-pencil"></span>
      <span>Article</span>
    </button>
    <button @click="tabs = 2" :class="{ 'active bg-purple-500/50 text-white': tabs === 2 }"
      class="w-1/3 sm:w-[120px] py-3 uajskeiolksb flex layhetgsjdcb yhansklopals gap-2 relative hover:bg-purple-500/50 hover:text-white">
      <span class="bi bi-image"></span>
      <span>Photos</span>
    </button>
    <button @click="tabs = 3" :class="{ 'active bg-purple-500/50 text-white': tabs === 3 }"
      class="w-1/3 sm:w-[120px] py-3 uajskeiolksb flex layhetgsjdcb yhansklopals gap-2 relative hover:bg-purple-500/50 hover:text-white">
      <span class="bi bi-camera-video"></span>
      <span>Video</span>
    </button>
  </div>
  <hr class="border-purple-500">
  <!-- tabs content -->
  <div class="flex">
    <div id="tab-4" x-show="tabs === 1" style="display:none"
      class="py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 1</h3>
    </div>
    <div id="tab-5" x-show="tabs === 2" style="display:none"
      class="py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 2</h3>
    </div>
    <div id="tab-6" x-show="tabs === 3" style="display:none"
      class="py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 3</h3>
    </div>
  </div>
</div>


<!-- Tabs pill -->
<div x-data="{ tab: '1' }" class="flex ioajsklehsnm">
  <!-- heading -->
  <div class="flex flex-wrap layhetgsjdcb gap-2 mb-6">
    <button @click.prevent="tab = '1'" :class="tab === '1' ? 'text-purple-600 dark:text-purple-200 !bg-purple-100 dark:!bg-purple-500' : ''" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2.5 hover:text-purple-600 dark:hover:text-purple-200 font-medium rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-white/80 dark:border-white/40 shadow">
      <i class="bi bi-person"></i> Personal Info
    </button>
    <button @click.prevent="tab = '2'" :class="tab === '2' ? 'text-purple-600 dark:text-purple-200 !bg-purple-100 dark:!bg-purple-500' : ''" class="py-2 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2.5 hover:text-purple-600 dark:hover:text-purple-200 font-medium rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-white/80 dark:border-white/40 shadow">
      <i class="bi bi-credit-card"></i> Payments
    </button>
  </div>

  <!-- content -->
  <div x-show="tab === '1'">
    <p>Content 1</p>
  </div>
  <div x-show="tab === '2'" style="display:none;">
    <p>Content 2</p>
  </div>
</div>