<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>Recusandae natus odit doloremque reiciendis assumenda totam molestiae saepe exercitationem error ea, praesentium ex recusandae, magni deleniti sunt, deserunt accusamus quam sunt autem harum facilis voluptatibus sapiente modi soluta? Voluptatem earum minima aut molestiae consequuntur itaque labore, nemo animi officiis iste soluta deserunt quaerat? Ratione explicabo nesciunt delectus molestias officia incidunt eos rem, ex doloribus architecto nobis eligendi nihil nesciunt deserunt enim, illum dolores inventore sint incidunt natus aspernatur perspiciatis ducimus error maiores. Tenetur reprehenderit quo officia rerum in consequuntur, debitis tempore libero corrupti totam laboriosam vel enim id in, voluptatum quisquam quo at culpa fugiat adipisci iusto quidem?</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>Eveniet est ratione, eius numquam quaerat, praesentium in necessitatibus mollitia iusto veritatis, dolorum tenetur temporibus repudiandae reiciendis accusamus eveniet explicabo officiis itaque amet voluptate. Suscipit aspernatur doloremque optio ad expedita ut iusto, vel ratione at corrupti accusantium adipisci corporis repellat consequuntur vero, obcaecati quasi rerum omnis, ullam repudiandae totam, hic suscipit ipsa quibusdam laudantium quia explicabo. Perferendis corporis hic corrupti laboriosam ipsa aspernatur, nam distinctio ex omnis, reiciendis fugiat voluptate quia accusantium repellendus, aperiam tempora excepturi nobis beatae dolores dignissimos, beatae corporis aut atque molestiae sed magni id. Vero nesciunt facilis ea placeat labore voluptatum iusto.</p>

<p>Ducimus itaque ratione fugit dolores vitae nesciunt ipsum, ratione sit ad, voluptates excepturi repellat tempore reiciendis corporis voluptatibus, fuga qui dignissimos doloribus nostrum a hic? Facere quisquam ullam blanditiis officiis molestias est consectetur vitae repellat dolorem quam, blanditiis quidem aliquid quos tempore repellendus? Iure accusantium error deserunt eaque ratione facilis, ipsum magnam laudantium unde earum adipisci sit inventore magni, ullam explicabo voluptatum odit, vitae reiciendis doloribus soluta. Veritatis unde similique cum officiis enim quasi accusamus soluta labore accusantium?</p>
              
    </div>
  

</div>