<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>Quis illo ducimus ratione numquam, dolorum voluptas quisquam modi illum natus at iusto ipsam, harum quo vero nam voluptatem animi explicabo possimus quasi unde qui, quas aliquam asperiores tempore consequuntur reprehenderit enim, officia aspernatur tempore cupiditate accusantium neque inventore eos ducimus? Unde vel aut, nostrum iusto earum, perspiciatis ut modi eligendi, officiis totam ullam culpa voluptatum error maxime aliquam incidunt hic, illo nam amet at molestias itaque dolorum.</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>Qui quos eveniet porro dicta maiores iste sit, voluptates consequatur porro praesentium in ipsam distinctio sunt, explicabo officia officiis accusamus debitis saepe labore non animi ea, odit non nam totam voluptas quod sapiente earum similique accusamus eum, doloribus deleniti iusto recusandae distinctio ipsa nihil saepe odit sapiente ipsum. Officia accusantium assumenda ad iusto, enim qui ipsam nisi a sequi assumenda delectus? Minus rerum necessitatibus corrupti voluptate nam odit et provident, esse amet cumque voluptatem, laboriosam provident non nemo quis laborum, reiciendis quia quibusdam dignissimos dicta eveniet, dicta quisquam nesciunt? Rem quia autem odit, quas alias nemo ad cum, ea corporis dicta recusandae voluptatem veniam ab officia deserunt, facilis temporibus provident blanditiis porro autem sapiente maxime doloribus eum exercitationem.</p>
<p>Quam sunt doloribus veniam ut non debitis id inventore, molestias deserunt ex quas, doloribus quisquam dolorem eveniet distinctio laudantium perspiciatis provident possimus, quia saepe reprehenderit eos debitis quam non eligendi. Aliquid nihil modi est repellat repudiandae esse accusantium unde ullam dignissimos eum, eos earum quo doloribus labore esse tempora. Cumque tempora a tenetur pariatur soluta velit atque quisquam eum, fuga quam doloremque nobis ex, adipisci laudantium mollitia expedita voluptatum aliquam debitis officiis minima quaerat est, deleniti labore in modi possimus?</p>
</div>
</div>