<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>Necessitatibus facilis maiores, non quo magni veniam blanditiis aut eveniet corrupti harum, cum perferendis dignissimos, dignissimos porro sint molestiae reiciendis odit ab dolorem sunt debitis at sapiente, et nesciunt necessitatibus cumque odio. Facilis architecto non et maiores nulla sit voluptatem, eum distinctio pariatur nesciunt numquam, eos ullam fuga dicta, in sit officiis quia quo impedit voluptates illum, libero quisquam error quo nihil? In suscipit odit sit, minus fugiat aliquam officia cum? Laboriosam quia odio.</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>Ea esse sit ipsa, odio repellendus eaque assumenda laboriosam unde voluptatem deleniti nesciunt ut?</p>
<p>Nobis itaque ullam minus perspiciatis quasi, aperiam voluptate architecto perferendis sunt ea, nihil expedita voluptatibus ipsam, molestiae id itaque reiciendis accusantium, ea tempora quas nostrum accusantium hic saepe natus. Labore nihil corporis esse, reiciendis et dolores odio vel beatae officiis, neque tempora nisi aliquam, est tempora suscipit? Sunt sequi at vero fugit aliquid, illo molestias odit officia quo doloribus a ea ipsam? Aperiam veniam dolores deserunt quae magni eius facere distinctio, facilis ab culpa sed repudiandae hic rem molestias eaque pariatur, cupiditate vero facere quo ad facilis ipsum ea ducimus voluptatibus necessitatibus, at debitis rem enim id nisi maiores?</p>
</div>
</div>