<div x-data="{ selected: 1 }" class="mb-6">
  <!-- tab button -->
  <div class="inline-flex -space-x-px layhetgsjdcb rounded-sm cklsihrbanmq shadow-[2px_2px_0_0_#000000]">
    <button @click="selected = 1" :class="{ 'active': selected === 1 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 1</button>

    <button @click="selected = 2" :class="{ 'active': selected === 2 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 2</button>

    <button @click="selected = 3" :class="{ 'active': selected === 3 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs  3</button>
  </div>

  <div x-show="selected === 1" style="display:none" class="py-4">
    Tab Content 1
  </div>

  <div x-show="selected === 2" style="display:none" class="py-4">
    Tab Content 2
  </div>

  <div x-show="selected === 3" style="display:none" class="py-4">
    Tab Content 3
  </div>
</div>
              
            

              
<div class="mb-6">
  <!-- tab button -->
  <div class="inline-flex -space-x-px layhetgsjdcb rounded-sm cklsihrbanmq shadow-[2px_2px_0_0_#000000]">
    <button data-type="tabs" data-target="#tab-1" class="active [&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 1</button>

    <button data-type="tabs" data-target="#tab-2" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 2</button>

    <button data-type="tabs" data-target="#tab-3" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs  3</button>
  </div>

  <div id="tab-1" role="tabpanel" class="active [&.active]:block hidden py-4">
    Tab Content 1
  </div>

  <div id="tab-2" role="tabpanel" class="[&.active]:block hidden py-4">
    Tab Content 2
  </div>

  <div id="tab-3" role="tabpanel" class="[&.active]:block hidden py-4">
    Tab Content 3
  </div>
</div>
              
            

              
<div x-data="{ selected: 1 }" class="mb-6">
  <div class="flex klsuaonrmcha spoathnmkles">
    <!-- tab button -->
    <div class="inline-flex ioajsklehsnm -space-y-px layhetgsjdcb rounded-sm cklsihrbanmq shadow-[2px_2px_0_0_#000000]">
      <button @click="selected = 1" :class="{ 'active': selected === 1 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 1</button>

      <button @click="selected = 2" :class="{ 'active': selected === 2 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 2</button>

      <button @click="selected = 3" :class="{ 'active': selected === 3 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs  3</button>
    </div>
     <!-- tabs content -->
    <div x-show="selected === 1" style="display:none">
      Tab Content 1
    </div>

    <div x-show="selected === 2" style="display:none">
      Tab Content 2
    </div>

    <div x-show="selected === 3" style="display:none">
      Tab Content 3
    </div>
  </div>
</div>
              
            

              
<div class="flex klsuaonrmcha spoathnmkles">
  <!-- tab button -->
  <div class="inline-flex ioajsklehsnm -space-y-px layhetgsjdcb rounded-sm cklsihrbanmq shadow-[2px_2px_0_0_#000000]">
    <button data-type="tabs" data-target="#tab-4" class="active [&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 1</button>

    <button data-type="tabs" data-target="#tab-5" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 2</button>

    <button data-type="tabs" data-target="#tab-6" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs  3</button>
  </div>
   <!-- tabs content -->
  <div id="tab-4" role="tabpanel" class="active [&.active]:block hidden">
    Tab Content 1
  </div>

  <div id="tab-5" role="tabpanel" class="[&.active]:block hidden">
    Tab Content 2
  </div>

  <div id="tab-6" role="tabpanel" class="[&.active]:block hidden">
    Tab Content 3
  </div>
</div>