<div class="border-b border-gray-200 dark:border-gray-700">
   <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary active" id="tabs-with-underline-item-1" data-hs-tab="#tabs-with-underline-1" aria-controls="tabs-with-underline-1" role="tab">
      Tab 1
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="tabs-with-underline-item-2" data-hs-tab="#tabs-with-underline-2" aria-controls="tabs-with-underline-2" role="tab">
      Tab 2
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="tabs-with-underline-item-3" data-hs-tab="#tabs-with-underline-3" aria-controls="tabs-with-underline-3" role="tab">
      Tab 3
      </button>
   </nav>
</div>
<div class="mt-3">
   <div id="tabs-with-underline-1" role="tabpanel" aria-labelledby="tabs-with-underline-item-1">
      <h3 class="text-xl text-gray-800 dark:text-white font-medium mb-1">Best Clean Tab ever</h3>
      <p class="text-sm"> Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.
      </p>
   </div>
   <div id="tabs-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-2">
      <h3 class="text-xl text-gray-800 dark:text-white font-medium mb-1">Clean Tab ever</h3>
      <p class="text-sm"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam temporibus optio eius neque, molestiae velit amet et hic perspiciatis!
      </p>
   </div>
   <div id="tabs-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-3">
      <h3 class="text-xl text-gray-800 dark:text-white font-medium mb-1">Best Tab ever</h3>
      <p class="text-sm"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore at sequi rem, unde soluta, quaerat id veniam consectetur.
      </p>
   </div>
</div>
            
                                                    

   
<div class="border-b border-gray-200 dark:border-gray-700">
   <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary active" id="tabs-with-icons-item-1" data-hs-tab="#tabs-with-icons-1" aria-controls="tabs-with-icons-1" role="tab">
      <i class="ti ti-home text-xl leading-tight font-medium"></i>
      Tab 1
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="tabs-with-icons-item-2" data-hs-tab="#tabs-with-icons-2" aria-controls="tabs-with-icons-2" role="tab">
      <i class="ti ti-user-circle text-xl leading-tight font-medium"></i>
      Tab 2
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="tabs-with-icons-item-3" data-hs-tab="#tabs-with-icons-3" aria-controls="tabs-with-icons-3" role="tab">
      <i class="ti ti-settings text-xl leading-tight font-medium"></i>
      Tab 3
      </button>
   </nav>
</div>
<div class="mt-3">
   <div id="tabs-with-icons-1" role="tabpanel" aria-labelledby="tabs-with-icons-item-1">
      <h3 class="text-xl text-gray-800 dark:text-white font-medium mb-1">Best Clean Tab ever</h3>
      <p class="text-sm"> Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.
      </p>
   </div>
   <div id="tabs-with-icons-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-icons-item-2">
      <h3 class="text-xl text-gray-800 dark:text-white font-medium mb-1">Clean Tab ever</h3>
      <p class="text-sm"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam temporibus optio eius neque, molestiae velit amet et hic perspiciatis!
      </p>
   </div>
   <div id="tabs-with-icons-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-icons-item-3">
      <h3 class="text-xl text-gray-800 dark:text-white font-medium mb-1">Best Tab ever</h3>
      <p class="text-sm"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore at sequi rem, unde soluta, quaerat id veniam consectetur.
      </p>
   </div>
</div>
            
                                                    

   
<div class="border-b border-gray-200 dark:border-gray-700">
   <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary active" id="tabs-with-badges-item-1" data-hs-tab="#tabs-with-badges-1" aria-controls="tabs-with-badges-1" role="tab">
      Tab 1 <span class="hs-tab-active:bg-lightprimary hs-tab-active:text-primary dark:hs-tab-active:bg-darkprimary dark:hs-tab-active:text-white ms-1 py-0.5 px-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">99+</span>
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="tabs-with-badges-item-2" data-hs-tab="#tabs-with-badges-2" aria-controls="tabs-with-badges-2" role="tab">
      Tab 2 <span class="hs-tab-active:bg-lightprimary hs-tab-active:text-primary dark:hs-tab-active:bg-darkprimary dark:hs-tab-active:text-white ms-1 py-0.5 px-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">99+</span>
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="tabs-with-badges-item-3" data-hs-tab="#tabs-with-badges-3" aria-controls="tabs-with-badges-3" role="tab">
      Tab 3
      </button>
   </nav>
</div>
<div class="mt-3">
   <div id="tabs-with-badges-1" role="tabpanel" aria-labelledby="tabs-with-badges-item-1">
      <p class="text-gray-500 dark:text-gray-400">
         Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
      </p>
   </div>
   <div id="tabs-with-badges-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-badges-item-2">
      <p class="text-gray-500 dark:text-gray-400">
         Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente.
      </p>
   </div>
   <div id="tabs-with-badges-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-badges-item-3">
      <p class="text-gray-500 dark:text-gray-400">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolor quibusdam explicabo eligendi iste, soluta temporibus error commodi perferendis. Odit eveniet repellat, repudiandae aliquam fuga, modi molestias reprehenderit soluta at, temporibus et minima ex qui ab quisquam! Minus fugit officiis repellendus ipsa asperiores optio veritatis.
      </p>
   </div>
</div>
            
                                                    

   
<nav class="relative z-0 flex border rounded-md overflow-hidden dark:border-gray-700" aria-label="Tabs" role="tablist">
   <button type="button" class="hs-tab-active:border-b-primary hs-tab-active:text-gray-900 dark:hs-tab-active:text-white dark:hs-tab-active:border-b-primary relative min-w-0 flex-1 bg-white first:border-s-0 border-s border-b-2 py-3 px-4 text-gray-500 hover:text-gray-700 text-base font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-400 active" id="bar-with-underline-item-1" data-hs-tab="#bar-with-underline-1" aria-controls="bar-with-underline-1" role="tab">
   Tab 1
   </button>
   <button type="button" class="hs-tab-active:border-b-primary hs-tab-active:text-gray-900 dark:hs-tab-active:text-white dark:hs-tab-active:border-b-primary relative min-w-0 flex-1 bg-white first:border-s-0 border-s border-b-2 py-3 px-4 text-gray-500 hover:text-gray-700 text-base font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-400" id="bar-with-underline-item-2" data-hs-tab="#bar-with-underline-2" aria-controls="bar-with-underline-2" role="tab">
   Tab 2
   </button>
   <button type="button" class="hs-tab-active:border-b-primary hs-tab-active:text-gray-900 dark:hs-tab-active:text-white dark:hs-tab-active:border-b-primary relative min-w-0 flex-1 bg-white first:border-s-0 border-s border-b-2 py-3 px-4 text-gray-500 hover:text-gray-700 text-base font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-400" id="bar-with-underline-item-3" data-hs-tab="#bar-with-underline-3" aria-controls="bar-with-underline-3" role="tab">
   Tab 3
   </button>
</nav>
<div class="mt-3">
   <div id="bar-with-underline-1" role="tabpanel" aria-labelledby="bar-with-underline-item-1">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img2.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p class="text-gray-500 dark:text-gray-400">
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
      </div>
   </div>
   <div id="bar-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="bar-with-underline-item-2">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-8">
            <p class="text-gray-500 dark:text-gray-400">
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img1.jpg" alt="" class="w-full">
         </div>
      </div>
   </div>
   <div id="bar-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="bar-with-underline-item-3">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img3.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p class="text-gray-500 dark:text-gray-400">
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
      </div>
   </div>
</div>
            
                                                    

   
<div class="border-b border-gray-200 dark:border-gray-700">
   <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
      <button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-primary dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -mb-px py-2 px-4 inline-flex items-center gap-x-2 bg-gray-50 text-base font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="card-type-tab-item-1" data-hs-tab="#card-type-tab-preview" aria-controls="card-type-tab-preview" role="tab">
      Tab 1
      </button>
      <button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-primary dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -mb-px py-2 px-4 inline-flex items-center gap-x-2 bg-gray-50 text-base font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="card-type-tab-item-2" data-hs-tab="#card-type-tab-2" aria-controls="card-type-tab-2" role="tab">
      Tab 2
      </button>
      <button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-primary dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -mb-px py-2 px-4 inline-flex items-center gap-x-2 bg-gray-50 text-base font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="card-type-tab-item-3" data-hs-tab="#card-type-tab-3" aria-controls="card-type-tab-3" role="tab">
      Tab 3
      </button>
   </nav>
</div>
<div class="mt-3">
   <div id="card-type-tab-preview" role="tabpanel" aria-labelledby="card-type-tab-item-1">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img4.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p class="text-gray-500 dark:text-gray-400">
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
            </p>
         </div>
      </div>
   </div>
   <div id="card-type-tab-2" class="hidden" role="tabpanel" aria-labelledby="card-type-tab-item-2">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-8">
            <p class="text-gray-500 dark:text-gray-400">
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
            </p>
         </div>
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img5.jpg" alt="" class="w-full">
         </div>
      </div>
   </div>
   <div id="card-type-tab-3" class="hidden" role="tabpanel" aria-labelledby="card-type-tab-item-3">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img6.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p class="text-gray-500 dark:text-gray-400">
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
            </p>
         </div>
      </div>
   </div>
</div>
            
                                                    

   
<nav class="pb-1 flex space-x-1 overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-slate-700 dark:[&::-webkit-scrollbar-thumb]:bg-slate-500" aria-label="Tabs" role="tablist">
   <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary active" id="horizontal-scroll-tab-item-1" data-hs-tab="#horizontal-scroll-tab-preview" aria-controls="horizontal-scroll-tab-preview" role="tab">
   Long tab link 1
   </button>
   <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="horizontal-scroll-tab-item-2" data-hs-tab="#horizontal-scroll-tab-2" aria-controls="horizontal-scroll-tab-2" role="tab">
   Long tab link 2
   </button>
   <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="horizontal-scroll-tab-item-3" data-hs-tab="#horizontal-scroll-tab-3" aria-controls="horizontal-scroll-tab-3" role="tab">
   Long tab link 3
   </button>
   <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="horizontal-scroll-tab-item-4" data-hs-tab="#horizontal-scroll-tab-4" aria-controls="horizontal-scroll-tab-4" role="tab">
   Long tab link 4
   </button>
   <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="horizontal-scroll-tab-item-5" data-hs-tab="#horizontal-scroll-tab-5" aria-controls="horizontal-scroll-tab-5" role="tab">
   Long tab link 5
   </button>
</nav>
<div class="mt-3">
   <div id="horizontal-scroll-tab-preview" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-1">
      <p>
         Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
      </p>
   </div>
   <div id="horizontal-scroll-tab-2" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-2">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti possimus reiciendis accusantium deleniti rem ipsa, perspiciatis voluptas tenetur velit maxime explicabo saepe inventore commodi itaque suscipit aliquid? Voluptatibus nihil magnam non, totam dolor amet aut ducimus, eos, explicabo facere tempore.
      </p>
   </div>
   <div id="horizontal-scroll-tab-3" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-3">
      <p>
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis minima ducimus, asperiores, eveniet est id laudantium amet tempore inventore nemo consequuntur exercitationem molestiae! Velit, molestias sequi? Provident harum explicabo, perferendis iste alias architecto consequatur inventore.
      </p>
   </div>
   <div id="horizontal-scroll-tab-4" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-4">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, mollitia eum nemo incidunt soluta consequuntur magnam earum provident cumque molestiae dolor voluptate explicabo eligendi fugit ipsum laboriosam minima minus maxime repellendus, at repudiandae? Similique quas quos rerum? Tenetur et officia sapiente numquam?
      </p>
   </div>
   <div id="horizontal-scroll-tab-5" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-5">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum cum deleniti repudiandae autem vitae aut libero in vel, dolorem illum nobis quasi voluptate temporibus porro consectetur alias nisi, iste architecto quia quod!
      </p>
   </div>
</div>
            
                                                    

   
<div class="flex">
   <div class="flex bg-gray-100 hover:bg-gray-200 rounded-md transition p-1 dark:bg-gray-700 dark:hover:bg-gray-600">
      <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
         <button type="button" class="hs-tab-active:bg-white hs-tab-active:text-gray-700 hs-tab-active:dark:bg-gray-800 hs-tab-active:dark:text-gray-400 dark:hs-tab-active:bg-gray-800 py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-base text-gray-500 hover:text-gray-700 font-medium rounded-md hover:hover:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-white active" id="segment-item-1" data-hs-tab="#segment-1" aria-controls="segment-1" role="tab">
         Tab 1
         </button>
         <button type="button" class="hs-tab-active:bg-white hs-tab-active:text-gray-700 hs-tab-active:dark:bg-gray-800 hs-tab-active:dark:text-gray-400 dark:hs-tab-active:bg-gray-800 py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-base text-gray-500 hover:text-gray-700 font-medium rounded-md hover:hover:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-white" id="segment-item-2" data-hs-tab="#segment-2" aria-controls="segment-2" role="tab">
         Tab 2
         </button>
         <button type="button" class="hs-tab-active:bg-white hs-tab-active:text-gray-700 hs-tab-active:dark:bg-gray-800 hs-tab-active:dark:text-gray-400 dark:hs-tab-active:bg-gray-800 py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-base text-gray-500 hover:text-gray-700 font-medium rounded-md hover:hover:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-white" id="segment-item-3" data-hs-tab="#segment-3" aria-controls="segment-3" role="tab">
         Tab 3
         </button>
      </nav>
   </div>
</div>
<div class="mt-3">
   <div id="segment-1" role="tabpanel" aria-labelledby="segment-item-1">
      <p class="text-gray-500 dark:text-gray-400">
         Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
      </p>
   </div>
   <div id="segment-2" class="hidden" role="tabpanel" aria-labelledby="segment-item-2">
      <p class="text-gray-500 dark:text-gray-400">
         Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente.
      </p>
   </div>
   <div id="segment-3" class="hidden" role="tabpanel" aria-labelledby="segment-item-3">
      <p class="text-gray-500 dark:text-gray-400">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolor quibusdam explicabo eligendi iste, soluta temporibus error commodi perferendis. Odit eveniet repellat, repudiandae aliquam fuga, modi molestias reprehenderit soluta at, temporibus et minima ex qui ab quisquam! Minus fugit officiis repellendus ipsa asperiores optio veritatis.
      </p>
   </div>
</div>
            
                                                    

   
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
   <button type="button" class="hs-tab-active:bg-primary hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-2 px-4 inline-flex items-center gap-x-2 bg-transparent text-base font-medium text-center text-gray-500 hover:text-primary rounded-md disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="pills-with-brand-color-item-1" data-hs-tab="#pills-with-brand-color-1" aria-controls="pills-with-brand-color-1" role="tab">
   Tab 1
   </button>
   <button type="button" class="hs-tab-active:bg-primary hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-2 px-4 inline-flex items-center gap-x-2 bg-transparent text-base font-medium text-center text-gray-500 hover:text-primary rounded-md disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="pills-with-brand-color-item-2" data-hs-tab="#pills-with-brand-color-2" aria-controls="pills-with-brand-color-2" role="tab">
   Tab 2
   </button>
   <button type="button" class="hs-tab-active:bg-primary hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-2 px-4 inline-flex items-center gap-x-2 bg-transparent text-base font-medium text-center text-gray-500 hover:text-primary rounded-md disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="pills-with-brand-color-item-3" data-hs-tab="#pills-with-brand-color-3" aria-controls="pills-with-brand-color-3" role="tab">
   Tab 3
   </button>
</nav>
<div class="mt-3">
   <div id="pills-with-brand-color-1" role="tabpanel" aria-labelledby="pills-with-brand-color-item-1">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img8.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p>
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
      </div>
   </div>
   <div id="pills-with-brand-color-2" class="hidden" role="tabpanel" aria-labelledby="pills-with-brand-color-item-2">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-8">
            <p>
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img9.jpg" alt="" class="w-full">
         </div>
      </div>
   </div>
   <div id="pills-with-brand-color-3" class="hidden" role="tabpanel" aria-labelledby="pills-with-brand-color-item-3">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img10.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p>
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
      </div>
   </div>
</div>
            
                                                    

   
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
   <button type="button" class="hs-tab-active:bg-primary hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-2 px-4 text-center flex-auto inline-flex justify-center items-center gap-x-2 bg-transparent text-base font-medium text-gray-500 hover:text-primary rounded-md disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="fill-and-justify-item-1" data-hs-tab="#fill-and-justify-1" aria-controls="fill-and-justify-1" role="tab">
   Tab 1
   </button>
   <button type="button" class="hs-tab-active:bg-primary hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-2 px-4 text-center flex-auto inline-flex justify-center items-center gap-x-2 bg-transparent text-base font-medium text-gray-500 hover:text-primary rounded-md disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="fill-and-justify-item-2" data-hs-tab="#fill-and-justify-2" aria-controls="fill-and-justify-2" role="tab">
   This is the longest link I've seen
   </button>
   <button type="button" class="hs-tab-active:bg-primary hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-2 px-4 text-center flex-auto inline-flex justify-center items-center gap-x-2 bg-transparent text-base font-medium text-gray-500 hover:text-primary rounded-md disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="fill-and-justify-item-3" data-hs-tab="#fill-and-justify-3" aria-controls="fill-and-justify-3" role="tab">
   Tab 3
   </button>
</nav>
<div class="mt-3">
   <div id="fill-and-justify-1" role="tabpanel" aria-labelledby="fill-and-justify-item-1">
      <p>
         Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
      </p>
   </div>
   <div id="fill-and-justify-2" class="hidden" role="tabpanel" aria-labelledby="fill-and-justify-item-2">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti possimus reiciendis accusantium deleniti rem ipsa, perspiciatis voluptas tenetur velit maxime explicabo saepe inventore commodi itaque suscipit aliquid? Voluptatibus nihil magnam non, totam dolor amet aut ducimus, eos, explicabo facere tempore.
      </p>
   </div>
   <div id="fill-and-justify-3" class="hidden" role="tabpanel" aria-labelledby="fill-and-justify-item-3">
      <p>
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis minima ducimus, asperiores, eveniet est id laudantium amet tempore inventore nemo consequuntur exercitationem molestiae! Velit, molestias sequi? Provident harum explicabo, perferendis iste alias architecto consequatur inventore.
      </p>
   </div>
</div>
            
                                                    

   
<div class="flex flex-wrap">
   <div class="border-e border-gray-200 dark:border-gray-700">
      <nav class="flex flex-col space-y-2" aria-label="Tabs" role="tablist" data-hs-tabs-vertical="true">
         <button type="button" class="hs-tab-active:border-primary hs-tab-active:text-primary dark:hs-tab-active:text-primary py-1 pe-4 inline-flex items-center gap-x-2 border-e-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary active" id="vertical-tab-with-border-item-1" data-hs-tab="#vertical-tab-with-border-1" aria-controls="vertical-tab-with-border-1" role="tab">
         Tab 1
         </button>
         <button type="button" class="hs-tab-active:border-primary hs-tab-active:text-primary dark:hs-tab-active:text-primary py-1 pe-4 inline-flex items-center gap-x-2 border-e-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="vertical-tab-with-border-item-2" data-hs-tab="#vertical-tab-with-border-2" aria-controls="vertical-tab-with-border-2" role="tab">
         Tab 2
         </button>
         <button type="button" class="hs-tab-active:border-primary hs-tab-active:text-primary dark:hs-tab-active:text-primary py-1 pe-4 inline-flex items-center gap-x-2 border-e-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="vertical-tab-with-border-item-3" data-hs-tab="#vertical-tab-with-border-3" aria-controls="vertical-tab-with-border-3" role="tab">
         Tab 3
         </button>
      </nav>
   </div>
   <div class="ms-3">
      <div id="vertical-tab-with-border-1" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-1">
         <p class="text-gray-500 dark:text-gray-400">
            This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
         </p>
      </div>
      <div id="vertical-tab-with-border-2" class="hidden" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-2">
         <p class="text-gray-500 dark:text-gray-400">
            This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
         </p>
      </div>
      <div id="vertical-tab-with-border-3" class="hidden" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-3">
         <p class="text-gray-500 dark:text-gray-400">
            This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
         </p>
      </div>
   </div>
</div>
            
                                                    

   
<div class="border-b border-gray-200 dark:border-gray-700">
   <nav class="-mb-0.5 flex justify-center space-x-6" aria-label="Tabs" role="tablist">
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary active" id="horizontal-alignment-item-1" data-hs-tab="#horizontal-alignment-1" aria-controls="horizontal-alignment-1" role="tab">
      Tab 1
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="horizontal-alignment-item-2" data-hs-tab="#horizontal-alignment-2" aria-controls="horizontal-alignment-2" role="tab">
      Tab 2
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="horizontal-alignment-item-3" data-hs-tab="#horizontal-alignment-3" aria-controls="horizontal-alignment-3" role="tab">
      Tab 3
      </button>
   </nav>
</div>
<div class="mt-3">
   <div id="horizontal-alignment-1" role="tabpanel" aria-labelledby="horizontal-alignment-item-1">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img2.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p>
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
      </div>
   </div>
   <div id="horizontal-alignment-2" class="hidden" role="tabpanel" aria-labelledby="horizontal-alignment-item-2">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-8">
            <p>
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img1.jpg" alt="" class="w-full">
         </div>
      </div>
   </div>
   <div id="horizontal-alignment-3" class="hidden" role="tabpanel" aria-labelledby="horizontal-alignment-item-3">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img3.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p>
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
      </div>
   </div>
</div>
            
                                                    

   
<div class="border-b border-gray-200 dark:border-gray-700">
   <nav class="-mb-0.5 flex justify-end space-x-6" aria-label="Tabs" role="tablist">
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary active" id="horizontal-right-alignment-item-1" data-hs-tab="#horizontal-right-alignment-1" aria-controls="horizontal-right-alignment-1" role="tab">
      Tab 1
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="horizontal-right-alignment-item-2" data-hs-tab="#horizontal-right-alignment-2" aria-controls="horizontal-right-alignment-2" role="tab">
      Tab 2
      </button>
      <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-3 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-base whitespace-nowrap text-gray-500 hover:text-primary focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-primary" id="horizontal-right-alignment-item-3" data-hs-tab="#horizontal-right-alignment-3" aria-controls="horizontal-right-alignment-3" role="tab">
      Tab 3
      </button>
   </nav>
</div>
<div class="mt-3">
   <div id="horizontal-right-alignment-1" role="tabpanel" aria-labelledby="horizontal-right-alignment-item-1">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img4.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p>
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
      </div>
   </div>
   <div id="horizontal-right-alignment-2" class="hidden" role="tabpanel" aria-labelledby="horizontal-right-alignment-item-2">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-8">
            <p>
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img5.jpg" alt="" class="w-full">
         </div>
      </div>
   </div>
   <div id="horizontal-right-alignment-3" class="hidden" role="tabpanel" aria-labelledby="horizontal-right-alignment-item-3">
      <div class="grid grid-cols-12 gap-6">
         <div class="col-span-4">
            <img src="../assets/images/blog/blog-img6.jpg" alt="" class="w-full">
         </div>
         <div class="col-span-8">
            <p>
               Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
            </p>
         </div>
      </div>
   </div>
</div>