Tabs

<div x-data="{ active: 'tab1' }">
  <div class="tabs">
    <div class="tabs-list">
      <button class="tab" :class="{ active: active === 'tab1' }"
        @click="active = 'tab1'">Tab 1</button>
      <button class="tab" :class="{ active: active === 'tab2' }"
        @click="active = 'tab2'">Tab 2</button>
    </div>
    <div class="tab-panel" x-show="active === 'tab1'">
      <p>Content 1</p>
    </div>
    <div class="tab-panel" x-show="active === 'tab2'">
      <p>Content 2</p>
    </div>
  </div>
</div>