<div id="scrollspy-scrollable-parent-1" class="max-h-[340px] overflow-y-auto">
   <header class="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-40 w-full bg-white text-sm py-4 dark:bg-gray-800">
      <nav class="max-w-[85rem] w-full mx-auto sm:flex sm:items-center sm:justify-between" aria-label="Global">
         <div class="flex items-center justify-between">
            <img src="../assets/images/logos/favicon.png">
            <div class="sm:hidden">
               <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-primary transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-collapse-basic" aria-controls="navbar-collapse-basic" aria-label="Toggle navigation">
               <i class="ti ti-menu-2 text-lg hs-collapse-open:hidden font-medium leading-none"></i>
               <i class="ti ti-x text-lg hs-collapse-open:block hidden font-medium leading-none"></i>
               </button>
            </div>
         </div>
         <div id="navbar-collapse-basic" class="hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
            <div data-hs-scrollspy="#scrollspy-1" data-hs-scrollspy-scrollable-parent="#scrollspy-scrollable-parent-1" class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5 [--scrollspy-offset:220] md:[--scrollspy-offset:70]">
               <a class="text-sm text-gray-700 leading-6 hover:text-gray-500 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-500 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary active" href="#first">First</a>
               <a class="text-sm text-gray-700 leading-6 hover:text-gray-500 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-500 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary" href="#second">Second</a>
               <div data-hs-scrollspy-group="" class="hs-dropdown [--adaptive:none] [--placement:bottom-right]">
                  <button type="button" id="hs-mega-menu-basic-dr" class="group hs-scrollspy-active:text-primary mb-3 sm:mb-0 inline-flex justify-center items-center gap-x-1 text-sm text-gray-700 leading-6 hover:text-gray-500 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-500 dark:focus:text-primary dark:hs-scrollspy-active:text-primary">
                     Dropdown
                     <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="m6 9 6 6 6-6"></path>
                     </svg>
                  </button>
                  <div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 z-10 bg-white sm:shadow-md rounded-md p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute top-full sm:border before:-top-5 before:start-0 before:w-full before:h-5 hidden">
                     <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-700 leading-6 hover:text-gray-500 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-500 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary" href="#third">
                     Third
                     </a>
                     <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-700 leading-6 hover:text-gray-500 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-500 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary" href="#fourth">
                     Fourth
                     </a>
                     <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-700 leading-6 hover:text-gray-500 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-500 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary" href="#fifth">
                     Fifth
                     </a>
                  </div>
               </div>
            </div>
         </div>
      </nav>
   </header>
   <div id="scrollspy-1" class="mt-3 space-y-4">
      <div id="first">
         <h3 class="text-lg text-dark font-semibold dark:text-white">First</h3>
         <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
      </div>
      <div id="second">
         <h3 class="text-lg text-dark font-semibold dark:text-white">Second</h3>
         <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
      </div>
      <div id="third">
         <h3 class="text-lg text-dark font-semibold dark:text-white">Third</h3>
         <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
      </div>
      <div id="fourth">
         <h3 class="text-lg text-dark font-semibold dark:text-white">Fourth</h3>
         <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
      </div>
      <div id="fifth">
         <h3 class="text-lg text-dark font-semibold dark:text-white">Fifth</h3>
         <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
      </div>
   </div>
</div>
                
                                                        

       
<div id="scrollspy-scrollable-parent-2" class="max-h-[400px] overflow-y-auto">
   <div class="grid grid-cols-5">
      <div class="col-span-2">
         <img src="../assets/images/logos/favicon.png" alt="">
         <ul class="sticky top-0" data-hs-scrollspy="#scrollspy-2" data-hs-scrollspy-scrollable-parent="#scrollspy-scrollable-parent-2">
            <li data-hs-docs-scrollspy-group="">
               <a href="#item-1" class="block py-0.5 text-sm font-medium leading-6 text-slate-700 hover:text-slate-900 focus:outline-none focus:text-primary dark:text-slate-400 dark:hover:text-slate-300 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary">Item 1</a>
               <ul>
                  <li class="ms-4">
                     <a href="#item-1-1" class="group flex items-center gap-x-2 py-0.5 text-sm text-gray-700 leading-6 hover:text-gray-800 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-300 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary">
                     <i class="ti ti-chevron-right text-lg leading-tight font-medium "></i>
                     Item 1-1
                     </a>
                  </li>
                  <li class="ms-4">
                     <a href="#item-1-2" class="group flex items-center gap-x-2 py-0.5 text-sm text-gray-700 leading-6 hover:text-gray-800 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-300 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary">
                     <i class="ti ti-chevron-right text-lg leading-tight font-medium "></i>
                     Item 1-2
                     </a>
                  </li>
               </ul>
            </li>
            <li>
               <a href="#item-2" class="block py-0.5 text-sm font-medium leading-6 text-slate-700 hover:text-slate-900 focus:outline-none focus:text-primary dark:text-slate-400 dark:hover:text-slate-300 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary active">Item 2</a>
            </li>
            <li data-hs-docs-scrollspy-group="">
               <a href="#item-3" class="block py-0.5 text-sm font-medium leading-6 text-slate-700 hover:text-slate-900 focus:outline-none focus:text-primary dark:text-slate-400 dark:hover:text-slate-300 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary">Item 3</a>
               <ul>
                  <li class="ms-4">
                     <a href="#item-3-1" class="group flex items-center gap-x-2 py-0.5 text-sm text-gray-700 leading-6 hover:text-gray-800 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-300 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary">
                     <i class="ti ti-chevron-right text-lg leading-tight font-medium "></i>
                     Item 3-1
                     </a>
                  </li>
                  <li class="ms-4">
                     <a href="#item-3-2" class="group flex items-center gap-x-2 py-0.5 text-sm text-gray-700 leading-6 hover:text-gray-800 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:text-gray-300 dark:focus:text-primary hs-scrollspy-active:text-primary dark:hs-scrollspy-active:text-primary">
                     <i class="ti ti-chevron-right text-lg leading-tight font-medium "></i>
                     Item 3-2
                     </a>
                  </li>
               </ul>
            </li>
         </ul>
      </div>
      <div class="col-span-3">
         <div id="scrollspy-2" class="space-y-4">
            <div id="item-1">
               <h3 class="text-lg text-dark font-semibold dark:text-white">Item 1</h3>
               <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
            </div>
            <div id="item-1-1">
               <h3 class="text-lg text-dark font-semibold dark:text-white">Item 1-1</h3>
               <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
            </div>
            <div id="item-1-2">
               <h3 class="text-lg text-dark font-semibold dark:text-white">Item 1-2</h3>
               <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
            </div>
            <div id="item-2">
               <h3 class="text-lg text-dark font-semibold dark:text-white">Item 2</h3>
               <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
            </div>
            <div id="item-3">
               <h3 class="text-lg text-dark font-semibold dark:text-white">Item 3</h3>
               <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
            </div>
            <div id="item-3-1">
               <h3 class="text-lg text-dark font-semibold dark:text-white">Item 3-1</h3>
               <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
            </div>
            <div id="item-3-2">
               <h3 class="text-lg text-dark font-semibold dark:text-white">Item 3-2</h3>
               <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
            </div>
         </div>
      </div>
   </div>
</div>