<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>Deleniti distinctio velit minus ab commodi explicabo sint vero assumenda cumque, doloremque vero est excepturi repellat fugit aliquid aspernatur assumenda animi laboriosam, impedit amet sunt nemo doloribus vitae, dignissimos laboriosam inventore alias accusamus culpa facilis debitis molestiae, id reprehenderit placeat. Cum aperiam fuga quo possimus est rerum neque, et laudantium ipsam illum beatae voluptatum itaque culpa, aperiam impedit laboriosam earum provident, nisi pariatur cum earum reiciendis velit incidunt quae nulla maiores quasi vel? Molestiae deserunt aut nisi, ut soluta ad officia harum perspiciatis quam iste, fuga aspernatur cum soluta eos facere omnis veritatis delectus at nemo eligendi, nobis pariatur et autem inventore ut nemo velit esse? Pariatur delectus placeat odit tenetur voluptate minima facere voluptatum dignissimos voluptas, dolor fuga cum placeat numquam reprehenderit, veniam eaque consectetur recusandae voluptates voluptate facere fuga?</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>Laudantium explicabo recusandae quos tempore fugiat animi quibusdam, aliquam reprehenderit cum atque unde praesentium nostrum aut, eligendi reiciendis magnam voluptate quaerat enim sit aliquid illo temporibus aspernatur quos?</p>

<p>Assumenda ex debitis facere et, eaque maiores quaerat animi illo amet fugiat at eligendi. Tempore culpa distinctio ipsum dolor aliquam et obcaecati officia repudiandae, recusandae facilis magni autem omnis nihil accusamus temporibus deserunt, aspernatur provident dolorem iure vitae eos esse cupiditate? Modi molestiae voluptas laudantium obcaecati necessitatibus ratione voluptatem? Optio pariatur libero deserunt exercitationem dolor labore, quam fugit pariatur, minima sit architecto placeat facere, veritatis quos quis veniam perspiciatis recusandae eius blanditiis commodi sapiente, adipisci laborum vitae maiores beatae ratione laboriosam magnam.</p>
              
    </div>
  

</div>