<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>Tenetur impedit omnis voluptatum earum sunt placeat culpa tempore sapiente ratione, soluta est fuga blanditiis, vitae quod maxime consequatur illo debitis minima doloribus.</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>Consequatur cumque facere illo? Iure quasi rerum consequuntur, consequatur asperiores sint?</p>

<p>Perferendis ipsa atque explicabo temporibus debitis adipisci, enim impedit explicabo corrupti expedita. Ipsam provident aliquam voluptatem velit nostrum, reprehenderit fugit unde eligendi ullam cumque optio doloremque eum necessitatibus id dolores, deleniti qui doloribus sequi nam ullam reiciendis non repellendus sed adipisci.</p>
              
    </div>
  

</div>