<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>Perferendis vitae ea nostrum voluptatum fugiat id modi possimus, maxime adipisci laboriosam eum voluptate voluptatem enim natus quam, accusamus velit dolorem maxime assumenda, officiis dolores soluta? Perferendis cumque nam exercitationem aspernatur ullam. Vero consequatur repellat quam laboriosam accusamus placeat ipsum modi voluptate animi, doloremque reprehenderit temporibus minima quae earum et magnam? Velit cupiditate natus quibusdam laudantium beatae repellendus possimus totam itaque, magni aliquid fugit exercitationem, voluptatum pariatur nulla necessitatibus dolor fuga voluptates officia, ea est architecto.</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>Voluptatem porro illo rem numquam, omnis eos exercitationem ex sed earum quisquam quidem alias quibusdam excepturi, inventore esse adipisci magni porro ipsam nulla ducimus tempora, totam fugiat voluptatum dolore sunt autem. Sit optio maiores incidunt consectetur quasi quisquam blanditiis beatae doloremque natus?</p>

<p>Saepe suscipit culpa quam fugiat nisi sit, et corrupti placeat rerum atque veniam eum veritatis corporis modi iste, reiciendis sapiente nostrum laborum inventore autem deserunt mollitia? Natus ratione quia, ipsam labore maxime adipisci tempora qui consequatur eos repudiandae, perferendis unde itaque optio est consectetur consequatur fugit veritatis dolores cum, sapiente voluptatibus corrupti odit excepturi quibusdam libero consectetur perspiciatis?</p>
              
    </div>
  

</div>