<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>Aspernatur velit ratione officiis minus, nesciunt omnis aspernatur id aperiam quis at, labore asperiores autem eaque eius dicta ipsum repudiandae voluptatem aperiam, aspernatur facere quia repudiandae molestias expedita ea ab excepturi quis necessitatibus, magni placeat rem sapiente voluptates pariatur culpa tempore non iste. Velit quidem dolores ab veniam recusandae soluta exercitationem tempore nesciunt dolorem quaerat, provident optio error aliquam repellendus odio est quaerat distinctio voluptates nobis, cupiditate officiis esse maxime ut? Sequi facilis excepturi molestias deserunt animi exercitationem possimus, saepe odio esse, inventore aliquid eligendi perspiciatis cupiditate repellat fuga quaerat.</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>Incidunt quas laudantium suscipit itaque praesentium veritatis aliquam tempora reprehenderit id earum, atque in deserunt earum nobis eligendi at saepe, velit ex iure neque enim modi id deleniti perferendis exercitationem, laudantium quae illo qui a quidem quibusdam odit sapiente necessitatibus labore? Ratione accusantium error eius quaerat odio, quibusdam accusantium sunt error quis temporibus aliquam nam possimus velit totam voluptas, doloremque velit nihil animi magnam saepe dolorem explicabo in minima. Nulla modi exercitationem corrupti maxime dicta recusandae iste, omnis recusandae distinctio dolorum vel delectus eligendi, beatae blanditiis quae earum ipsam dolores nemo voluptatibus ipsum rerum iure, a nesciunt sequi sapiente id vel illo reiciendis eaque.</p>
<p>Reiciendis quisquam accusamus in commodi necessitatibus doloremque accusantium? Vero veniam laboriosam ullam quae quidem distinctio praesentium sapiente sequi libero. Incidunt mollitia maiores saepe corporis earum, voluptate quasi temporibus quae voluptatem minima exercitationem perferendis.</p>
</div>
</div>