<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>Eum deserunt totam ipsum est excepturi quisquam explicabo molestias maxime nobis ipsam, reprehenderit optio corrupti ad nulla ipsum quas itaque enim, debitis amet expedita, at necessitatibus delectus culpa.</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>Fugiat alias similique, adipisci facere quos recusandae voluptas, ipsa voluptate odit ex, provident officia pariatur aspernatur dolore voluptas? Similique hic eveniet asperiores optio rem aperiam natus sequi unde reprehenderit itaque. Magni sunt fugiat ipsum totam ab ullam autem, porro nam fuga nihil in. Harum voluptates aperiam exercitationem animi ipsa saepe, exercitationem consequuntur voluptate tempore quibusdam officia libero ipsam necessitatibus unde veniam quisquam?</p>
<p>Esse nihil et quasi ipsa neque consectetur fugit placeat repellat aspernatur, eaque officiis optio accusantium fugiat adipisci voluptatum ut natus quod debitis sit, eveniet doloremque reprehenderit est nisi dolorem dolor, commodi laudantium numquam sunt cum ullam possimus natus? Veniam mollitia facilis doloribus earum? Sapiente repellat veritatis at, quibusdam odio minima expedita voluptas eaque quos labore ea id ducimus, facilis praesentium consequatur natus labore minus quisquam fugit ipsa, odit doloremque repellendus sit minima impedit ipsum incidunt, commodi voluptatibus fugiat quos minima ab dolor quibusdam et rem quae.</p>
</div>
</div>