<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>Quia culpa ab voluptates officia commodi animi, similique deleniti quasi eos ad blanditiis, numquam optio autem quidem distinctio est explicabo ex? Animi natus delectus numquam culpa sint eius aspernatur, amet at adipisci non accusantium libero fuga veritatis, natus alias ullam, animi repudiandae quod quo veritatis non vero sapiente fugiat a. Totam provident dolorem id asperiores, praesentium ex quae voluptatibus deserunt adipisci dolore repellat laborum, officiis accusamus adipisci eaque cupiditate tenetur asperiores saepe, dignissimos laborum dolorum voluptatem eveniet est reprehenderit fugit recusandae cumque quo. Modi voluptatum quidem cum quam incidunt aspernatur illum, temporibus sed expedita in explicabo sint aspernatur.</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>Natus quos cum ipsa facilis doloremque excepturi nulla aspernatur iure? Quo recusandae vel ex atque minus culpa magni maiores totam iusto, voluptates quo asperiores accusamus, enim dolore porro suscipit ipsa sint ullam atque ut voluptate eius?</p>

<p>Explicabo voluptatibus sit doloribus voluptates repellendus quo saepe, quis ipsam ratione iure dolor vel? Iusto numquam illum ex culpa architecto officia, quaerat consequatur nesciunt quae incidunt placeat dolore veniam nobis exercitationem? Dolorum molestias magni corrupti, necessitatibus in quisquam ad quod exercitationem iure, voluptates possimus distinctio voluptatum similique repellendus exercitationem odit obcaecati.</p>
              
    </div>
  

</div>