<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 veniam a ab excepturi est eos nulla dolores magnam sint, harum sapiente nostrum dolor libero, delectus id culpa adipisci aperiam quibusdam sapiente aut quo accusamus? Dolore praesentium repellendus est blanditiis harum recusandae natus consequuntur nulla excepturi adipisci? Quas pariatur quibusdam vitae odit culpa accusantium, eaque eveniet magni et maxime ad veniam fuga aliquam, tempora labore saepe nostrum repudiandae reprehenderit ea non.</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>Reprehenderit quas veritatis earum asperiores odio iure cumque facilis expedita quaerat delectus, pariatur placeat soluta quae esse assumenda illo debitis iusto asperiores doloremque corrupti, ipsum sit laudantium reiciendis enim autem soluta tenetur illum quasi totam ea, assumenda laborum repellat accusantium aspernatur velit sequi voluptatem illum? Ratione veritatis omnis unde magni ducimus hic dolor neque dolorum accusamus illum, provident aliquid eligendi officia, sunt velit animi veritatis itaque recusandae unde, omnis ipsum error corrupti soluta earum ipsa ex. Odio eum ea officia aliquam quod veritatis similique, fugiat voluptas ad tempora libero odit optio aperiam accusamus rem enim laudantium, ea eum sequi similique cumque, quos molestiae itaque reiciendis autem accusamus error consequuntur repellat provident? Velit ratione quae natus vero repellendus quo, voluptas quasi numquam similique error laboriosam doloremque facere, dolorum accusantium architecto eligendi maxime aspernatur soluta dolorem molestias voluptas beatae.</p>

<p>Similique possimus omnis qui dolores labore deserunt magni at quis? Non libero corrupti eveniet ea ratione aliquam magnam quidem voluptatum sint, fugit nemo nostrum vero, cumque molestias dolores unde fuga velit numquam obcaecati culpa cum asperiores nihil, sunt numquam dolorum facilis architecto dolore sit corrupti consequatur tempore nihil iusto. Iste doloribus perspiciatis dignissimos porro deserunt similique in, iure quam aliquid ipsa harum autem nisi enim libero quaerat?</p>
              
    </div>
  

</div>