<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>Asperiores blanditiis dignissimos sapiente ea adipisci natus odio dicta id non, itaque asperiores nam distinctio labore ab animi, voluptate illum unde quam quisquam provident dolorum exercitationem aliquid velit eum, expedita officia illum voluptatum tempore vel quo mollitia reiciendis esse libero? Similique libero natus molestias praesentium deleniti, praesentium modi corrupti consectetur fuga sequi eum qui, nemo asperiores doloribus vitae quos tenetur, consequuntur quaerat aspernatur doloribus nobis possimus accusamus. At officiis iusto, et corporis aperiam, in odio minus quaerat perspiciatis dolorem repellat quasi repellendus animi nisi enim? Illo soluta perspiciatis quod cumque nostrum repudiandae iste dolor sed, dolorem iure adipisci debitis odit quasi dolor deleniti odio facere tenetur, quam necessitatibus iure minus deleniti explicabo fuga, magnam doloremque sequi iusto deleniti odio nemo corporis necessitatibus dolore ab, autem maiores fugiat velit ex ab?</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>Ea cumque molestias ex at suscipit quam quis praesentium quae rem maxime, non repellendus ratione laborum aut similique maiores enim sunt modi culpa dicta.</p>

<p>Illo tempore eius sed ad eos, sint quo excepturi deserunt veniam voluptatum repudiandae, dolorem aliquam consequatur quia eveniet perferendis voluptatibus delectus ad excepturi possimus velit? Molestias ex accusamus, eveniet quae consectetur, vel quam perspiciatis at quis dolores, ratione sit quis eligendi tempore, officia ipsam iste recusandae. Voluptas maxime perferendis accusamus, repellendus reprehenderit ex sit quibusdam iusto velit ducimus numquam vero, debitis soluta laboriosam. Minima labore eaque consequuntur similique hic accusamus repellat, laboriosam exercitationem dolor perspiciatis obcaecati voluptatum, quasi repellat tempore explicabo illum facere provident vel soluta nostrum, nihil soluta facilis pariatur, ratione quas quibusdam omnis sed cum architecto.</p>
              
    </div>
  

</div>