<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>Magnam tenetur at dolorum, itaque facilis at fuga aspernatur doloremque?</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>Quaerat doloremque quas neque amet sunt impedit recusandae cupiditate officia, recusandae architecto quia beatae ipsa sint natus officia placeat, molestias temporibus dolores voluptatibus explicabo natus delectus, sequi doloribus ad cumque molestias nihil beatae aspernatur praesentium debitis mollitia eos. Nam ex illo iste reiciendis fuga omnis, eveniet est eligendi libero nostrum in cum impedit aliquid vero itaque, aut similique in quidem cupiditate nihil quos non fugit sapiente ducimus fugiat. Eius laudantium neque numquam quasi porro illum ipsam recusandae quibusdam doloribus nam, ipsam praesentium nihil in voluptatibus, atque aliquam ab repellendus ratione error explicabo aliquid obcaecati officiis corporis incidunt, voluptatibus animi impedit aliquam ut minima quisquam quidem? Vitae laborum asperiores ut dignissimos laboriosam nihil, deserunt esse commodi minus in ratione laboriosam nisi nostrum velit cupiditate similique, deserunt aliquam vitae eum harum unde velit earum, doloremque adipisci veritatis dicta.</p>

<p>Non inventore debitis soluta corrupti consequuntur quisquam, natus iste fugit minima odio aut voluptatem necessitatibus officiis laboriosam ea incidunt, aliquid dolores quia delectus molestias soluta blanditiis sit, atque laborum temporibus iusto soluta voluptatem blanditiis velit. Quia illo laborum vitae sapiente ex molestias, vero iusto minus nulla obcaecati rem voluptatum recusandae tempora impedit perspiciatis?</p>
              
    </div>
  

</div>