Tabs

            
<!-- tabs -->
<div data-type="tabs-container" class="tabs flex flex-col w-full sm:w-[360px]">
  <!-- tabs header -->
  <div class="relative flex flex-row gap-4 items-center mb-4">
    <button data-type="tabs" data-target="#tab-1" class="active py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
      <span class="text-sm tracking-[.00714em]">Tab 1</span>
    </button>
    <button data-type="tabs" data-target="#tab-2" class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
      <span class="text-sm tracking-[.00714em]">Tab 2</span>
    </button>
    <button data-type="tabs" data-target="#tab-3" class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
      <span class="text-sm tracking-[.00714em]">Tab 3</span>
    </button>
  </div>
  
  <!-- tabs content -->
  <div class="flex flex-col">
    <div id="tab-1" role="tabpanel" class="active [&.active]:block hidden p-4 rounded transition duration-400 shadow-inset-fixed ease-in-out">
      <h3>Tabs content 1</h3>
    </div>
    <div id="tab-2" role="tabpanel" class="[&.active]:block hidden p-4 rounded transition duration-400 shadow-inset-fixed ease-in-out">
      <h3>Tabs content 2</h3>
    </div>
    <div id="tab-3" role="tabpanel" class="[&.active]:block hidden p-4 rounded transition duration-400 shadow-inset-fixed ease-in-out">
      <h3>Tabs content 3</h3>
    </div>
  </div>
</div>