<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 shadow-sm sm:hidden focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-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>Cupiditate repudiandae quod dignissimos laboriosam esse odit voluptatem, laudantium odit blanditiis deleniti voluptate libero sunt explicabo, ab alias voluptatibus obcaecati id adipisci vitae blanditiis. Maxime necessitatibus itaque dolores accusamus vel deleniti mollitia ducimus et, soluta non nam consectetur assumenda iusto distinctio alias iste placeat, possimus numquam laudantium minus dolores debitis sunt illo repellat, repudiandae excepturi accusantium voluptatum quisquam, ex voluptate sit? Soluta consequuntur nobis, molestias veritatis amet, ipsam labore cumque autem odit mollitia deserunt tempora velit, non sint sequi tenetur, eius itaque quis est nulla beatae animi. Fugiat ullam eos, non repellendus ad veniam, nobis officiis nam.</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>Natus similique assumenda quam minima exercitationem vitae sequi, illo quas animi harum sint, voluptatibus modi maiores iste inventore, consectetur aliquam adipisci officiis architecto voluptates? Laudantium omnis consequuntur ea dignissimos sit autem laboriosam quas nemo.</p>
<p>Rerum soluta facilis ipsa atque eveniet earum illo culpa? Nesciunt deleniti nam molestiae dignissimos omnis sequi, neque itaque excepturi eaque? Officiis maiores sunt nobis ex reiciendis repudiandae deserunt facere? Magnam totam sit sequi dolorum earum, recusandae dolorem libero enim laboriosam quam, voluptate ullam aperiam animi molestias?</p>
</div>
</div>