Tabs are implemented with the Stimulus.js tabs_controller. It works by having an list of tabs and panel targets that are hidden and shown based upon the active tab.
<div data-controller="tabs"
data-tabs-active-tab-class="border-primary-500 text-primary-600"
data-tabs-inactive-tab-class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 dark:hover:text-neutral-300">
<select id="" class="sm:hidden mb-4" data-action="tabs#change"><option value="Tab 1">Tab 1</option>
<option value="Tab 2">Tab 2</option>
<option value="Tab 3">Tab 3</option></select>
<div class="hidden sm:block mb-4 border-b border-gray-200">
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<a href="#"
data-tabs-target="tab"
data-action="click->tabs#change:prevent"
class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium">
Tab 1
</a>
<a href="#"
data-tabs-target="tab"
data-action="click->tabs#change:prevent"
class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium">
Tab 2
</a>
<a href="#"
data-tabs-target="tab"
data-action="click->tabs#change:prevent"
class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium">
Tab 3
</a>
</nav>
</div>
<div class="hidden" data-tabs-target="panel">
Tab panel 1
</div>
<div class="hidden" data-tabs-target="panel">
Tab panel 2
</div>
<div class="hidden" data-tabs-target="panel">
Tab panel 3
</div>
</div>