<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 dark:hover:text-neutral-300 hover:border-neutral-300 hover:text-neutral-700">
<select class="block mt-1 mb-4 w-full rounded-md border-gray-300 sm:hidden focus:border-blue-300 focus:ring shadow-xs focus:ring-blue-200/50" data-action="tabs#change">
<option value="
Tab header 1
">
Tab header 1
</option>
<option value="
Tab header 2
">
Tab header 2
</option>
<option value="
Tab header 3
">
Tab header 3
</option>
</select>
<div class="hidden mb-4 border-b border-gray-200 sm:block">
<nav class="flex -mb-px space-x-8" aria-label="Tabs">
<a href="#"
data-tabs-target="tab"
data-action="click->tabs#change:prevent"
class="py-4 px-1 text-sm font-medium whitespace-nowrap border-b-2">
Tab header 1
</a>
<a href="#"
data-tabs-target="tab"
data-action="click->tabs#change:prevent"
class="py-4 px-1 text-sm font-medium whitespace-nowrap border-b-2">
Tab header 2
</a>
<a href="#"
data-tabs-target="tab"
data-action="click->tabs#change:prevent"
class="py-4 px-1 text-sm font-medium whitespace-nowrap border-b-2">
Tab header 3
</a>
</nav>
</div>
<div class="hidden" data-tabs-target="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="hidden" data-tabs-target="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ipsa ipsam fugit a, laudantium culpa cum assumenda, cum voluptas amet perspiciatis? Animi dolorum facilis quod obcaecati quos maxime alias repudiandae iusto beatae, hic corporis modi est fuga, iste quas accusamus voluptatibus iusto modi aut omnis quasi, sapiente quisquam officiis dolorem ducimus error aspernatur id aut consectetur molestias nesciunt.</p>
</div>
<div class="hidden" data-tabs-target="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Alias saepe tempore sint sunt ad optio aspernatur, eveniet at maiores magnam aliquid fugit ipsum amet adipisci expedita tempora dolorem, incidunt ullam cum vel, cumque nam dolore labore repellendus minus cum minima maiores, et non sint maiores aut quam eos ducimus.</p>
<p>Possimus voluptates laudantium debitis aspernatur, velit at suscipit quia. Voluptatem dolorum obcaecati voluptates aliquid atque ad vel consequatur earum, nostrum iste cumque saepe, fuga voluptate voluptatum odio. Labore temporibus quam corporis dolore exercitationem debitis harum, vitae itaque animi optio error debitis officiis est ipsam neque repudiandae, quidem odio minus cum neque totam et ex culpa dolor, neque esse qui sapiente similique. Officia sapiente soluta atque eos ut, ab assumenda vero totam porro minus odit recusandae nihil velit?</p>
</div>
</div>