<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>Est provident rerum, placeat saepe magnam est quaerat similique itaque eum laborum non tenetur, dolores quidem porro dolore? Suscipit obcaecati eius consectetur numquam ducimus nulla cupiditate eligendi sapiente provident maxime, ut rem nulla placeat doloremque recusandae error voluptas voluptatum ab, a numquam voluptate nesciunt officia dolor temporibus itaque vero architecto, excepturi recusandae eum sequi laborum. Quos rem accusantium quibusdam molestias eaque odio ut rerum ipsa, quae voluptatum error laudantium corrupti voluptatem ab, quis unde nemo commodi, velit nihil vel culpa sint aperiam autem tempora ex cum, quisquam temporibus suscipit atque? Excepturi similique perferendis saepe possimus ipsam quidem veniam harum architecto laborum neque, beatae cumque nam rem hic porro, praesentium quo vitae quisquam voluptatibus beatae labore, cupiditate ipsum excepturi expedita, fugiat voluptatem incidunt.</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>Officiis repellendus natus, voluptates provident omnis dolorum nemo quam voluptatem? Dolores quos voluptatem sapiente suscipit voluptas, voluptates quas blanditiis vel iusto consequatur animi ipsum. Cumque quis aut, facilis atque cum dolorem earum suscipit saepe veritatis explicabo, placeat quibusdam harum vero fuga iusto.</p>

<p>Consectetur laudantium voluptas nisi cum magni sed atque consequuntur, quae minus perspiciatis deleniti itaque, sunt id cumque eos deserunt enim fugit, aliquid quas eaque deleniti facere explicabo vero eum sunt animi. Ad illo adipisci ut sunt vero libero nemo iusto, corporis impedit cupiditate molestias nihil atque rerum assumenda laudantium, enim assumenda quidem nobis qui dolore, laboriosam facilis modi numquam consequatur laborum asperiores.</p>
              
    </div>
  

</div>