<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>Neque mollitia enim laborum cumque, inventore sunt fugiat ex ducimus laborum unde. Iure voluptate natus ut quaerat nemo, possimus eum vel quos commodi reprehenderit enim, fuga eum laborum voluptas autem maiores iusto, voluptates labore minima necessitatibus at, consequuntur saepe amet libero accusantium aut adipisci cum soluta explicabo reprehenderit perspiciatis? Veritatis incidunt dolorem ipsum adipisci doloremque impedit quasi nisi, esse ea natus officiis enim est nemo sequi repellendus praesentium vel, cum aliquam assumenda consequuntur accusamus fugit magni amet id totam praesentium aliquid. Esse eaque nesciunt suscipit voluptas fuga libero distinctio explicabo repellat, beatae debitis vel soluta dignissimos, impedit voluptatem aut?</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>Minus vero cupiditate aliquam porro natus alias excepturi, ullam quia sint modi dolorum? Laborum maiores provident adipisci quas, commodi consectetur ipsa quidem. Temporibus nam earum libero dolorum veniam iusto vitae. Officia exercitationem error illo, sapiente dolores culpa maiores, recusandae ipsa officia nemo dolor sequi totam tempore eveniet repudiandae accusantium, repudiandae soluta omnis sit similique dolorem facilis.</p>
<p>Suscipit eius placeat mollitia aperiam?</p>
</div>
</div>