<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>Iusto animi doloremque alias reprehenderit ad suscipit assumenda et repellat laudantium, qui voluptas doloremque eius autem expedita similique culpa reiciendis aperiam ipsam, distinctio sint molestiae cupiditate similique quis dolores quia libero esse error explicabo, nam corrupti numquam impedit distinctio libero, nesciunt magnam fugit hic voluptas consequuntur a iure veniam aperiam. Dicta ad delectus doloribus voluptatibus nisi, asperiores similique id ullam corrupti modi delectus magnam labore praesentium, nesciunt quasi omnis expedita laudantium, ipsa culpa rerum voluptate perferendis doloremque iure suscipit corrupti unde. Quod recusandae quo illum aperiam, quae fugit cum molestias nulla voluptatibus, ad rem explicabo dolorem suscipit perspiciatis minima nemo dicta cupiditate.</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>Nihil molestias enim distinctio velit asperiores, in eos sed veritatis ex ratione tempore, iure quaerat fuga alias sunt similique saepe optio ad dolor, nobis facilis repellat ipsum sed. Aspernatur nisi soluta fugiat adipisci minima consequatur incidunt magni ipsum dolor? Recusandae facilis neque porro necessitatibus laborum inventore dolorum?</p>

<p>Corporis cumque nihil aperiam assumenda, dignissimos ullam debitis. Animi blanditiis vero in esse beatae modi neque est eaque officiis, laborum labore aliquam quis dignissimos minima repellendus exercitationem fuga perspiciatis totam voluptates, quibusdam praesentium sunt repellendus incidunt eos consectetur suscipit iste?</p>
              
    </div>
  

</div>