<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>At ipsa sequi doloremque maxime rem nihil inventore?</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>Inventore iste animi, officiis nam qui ipsum sit assumenda quo aliquid? Voluptatum earum atque corrupti voluptas veritatis neque repellendus, tempora aliquid quis eaque est voluptatem doloribus asperiores consectetur fugit ullam mollitia, aut soluta maiores delectus magnam quam minus repellat eveniet expedita repellendus vel? Aspernatur maiores sunt iusto voluptatibus, adipisci perferendis itaque, distinctio quo laboriosam atque voluptas soluta quaerat et aperiam, nulla maiores velit incidunt et, fugit eveniet hic quidem aliquam suscipit placeat.</p>
<p>Laudantium nemo veritatis itaque eos tempora exercitationem a quidem aut in, quas labore excepturi ipsum soluta quisquam quidem architecto laborum iure vitae harum, nobis aliquam quos error recusandae beatae maxime, nam corrupti eius enim? Natus temporibus ea ullam non sequi quibusdam quae porro aut, quod vitae hic aliquid quibusdam libero, est possimus sit porro maiores corporis fugiat, dignissimos totam perferendis recusandae ad soluta id neque at veritatis aliquam molestias, enim quasi et pariatur neque. Ut recusandae similique, dolorum impedit soluta corrupti commodi alias minima vero maxime officiis quibusdam possimus, officiis a asperiores, dolorum quos sapiente reiciendis?</p>
</div>
</div>