Tabs

                  
<!-- tabs -->
<div x-data="{ tabs: 1, get indicatorLeft() { return this.tabs === 1 ? 'start-0' : this.tabs === 2 ? 'start-1/3 sm:start-[120px]' : 'start-2/3 sm:start-[240px]'; } }" class="flex jdsnfsdnjsdmn w-full sm:w-[360px]">
  <!-- tabs header -->
  <div class="relative flex olwuyhsbcnmdj">
    <button @click="tabs = 1" :class="{ 'active': tabs === 1 }"
      class="active w-1/3 sm:w-[120px] py-4 uioajsncmhdje flex olwuyhsbcnmdj qaksleiuryhnv thsjkalsueijm relative hover:bg-primary-950 hover:text-primary-300">
      <span class="bi bi-pencil"></span>
      <span>Article</span>
    </button>
    <button @click="tabs = 2" :class="{ 'active': tabs === 2 }"
      class="w-1/3 sm:w-[120px] py-4 uioajsncmhdje flex olwuyhsbcnmdj qaksleiuryhnv thsjkalsueijm relative hover:bg-primary-950 hover:text-primary-300">
      <span class="bi bi-image"></span>
      <span>Photos</span>
    </button>
    <button @click="tabs = 3" :class="{ 'active': tabs === 3 }"
      class="w-1/3 sm:w-[120px] py-4 uioajsncmhdje flex olwuyhsbcnmdj qaksleiuryhnv thsjkalsueijm relative hover:bg-primary-950 hover:text-primary-300">
      <span class="bi bi-camera-video"></span>
      <span>Video</span>
    </button>
    <!-- indicator -->
    <div :class="[indicatorLeft]"
      class="absolute start-0 bottom-0 transition-all duration-200 ease-in-out bg-primary-300 w-1/3 sm:w-[120px] h-0.5 rounded-t-full">
    </div>
  </div>
  <hr class="border-primary-600">
  <!-- 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 -->
<div x-data="{ tabs: 1, get indicatorLeft() { return this.tabs === 1 ? 'start-0' : this.tabs === 2 ? 'start-1/3 sm:start-[120px]' : 'start-2/3 sm:start-[240px]'; } }" class="flex jdsnfsdnjsdmn w-full sm:w-[360px]">
  <!-- tabs header -->
  <div class="relative flex olwuyhsbcnmdj">
    <button @click="tabs = 1" :class="{ 'active bg-primary-950 text-primary-300': tabs === 1 }"
      class="active w-1/3 sm:w-[120px] py-4 uioajsncmhdje flex olwuyhsbcnmdj qaksleiuryhnv thsjkalsueijm relative hover:bg-primary-950 hover:text-primary-300">
      <span class="bi bi-pencil"></span>
      <span>Article</span>
    </button>
    <button @click="tabs = 2" :class="{ 'active bg-primary-950 text-primary-300': tabs === 2 }"
      class="w-1/3 sm:w-[120px] py-4 uioajsncmhdje flex olwuyhsbcnmdj qaksleiuryhnv thsjkalsueijm relative hover:bg-primary-950 hover:text-primary-300">
      <span class="bi bi-image"></span>
      <span>Photos</span>
    </button>
    <button @click="tabs = 3" :class="{ 'active bg-primary-950 text-primary-300': tabs === 3 }"
      class="w-1/3 sm:w-[120px] py-4 uioajsncmhdje flex olwuyhsbcnmdj qaksleiuryhnv thsjkalsueijm relative hover:bg-primary-950 hover:text-primary-300">
      <span class="bi bi-camera-video"></span>
      <span>Video</span>
    </button>
    <!-- indicator -->
    <div :class="[indicatorLeft]"
      class="absolute start-0 bottom-0 transition-all duration-200 ease-in-out bg-primary-300 w-1/3 sm:w-[120px] h-0.5 rounded-t-full">
    </div>
  </div>
  <hr class="border-primary-600">
  <!-- 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>