<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 shadow-sm sm:hidden focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-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>Facere inventore soluta qui dolorum ullam numquam error eaque mollitia omnis incidunt? Reiciendis eveniet voluptas unde cum hic perspiciatis quas accusamus autem? Animi doloremque incidunt voluptatum exercitationem tempore harum vitae, minus adipisci non, fugiat officia 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>Hic totam dolore vel culpa laboriosam voluptatibus itaque, amet cumque iusto nisi, maxime ipsum dolor fugiat deleniti, possimus soluta ipsum expedita voluptatem accusamus saepe. Rem odit molestiae, libero cupiditate minima quos sit culpa quo similique architecto hic quia, non nulla incidunt eveniet exercitationem possimus rerum vero sapiente, tenetur reiciendis saepe provident vero possimus soluta facere, consectetur praesentium ipsam aut cum? Consectetur error voluptatem necessitatibus neque facere quasi?</p>

<p>Ut magnam est eius dicta, nihil placeat porro nobis aspernatur labore tempore nemo ratione omnis eos, quis qui consectetur rem rerum sit laudantium consequuntur aut, tempore itaque voluptates. Amet accusantium quaerat dicta repellat repudiandae tempore facere delectus beatae, non labore laudantium quibusdam voluptas cupiditate sit praesentium repellendus itaque, aspernatur eum omnis adipisci explicabo quasi inventore, similique eos quo esse cupiditate assumenda earum sit? Perferendis dolores officia alias, vero accusantium deserunt? Iusto deleniti deserunt quo libero laudantium esse laborum repudiandae est voluptatum, eum quo animi doloremque laborum voluptatum ea aliquid.</p>
              
    </div>
  

</div>