<div data-theme="dark" class="h-full flex w-full flex-col items-center justify-center bg-[#1a1d21]">
  
        <div class='dropdown-bottom dropdown-center relative mb-20 w-fit hover:[&>ul]:flex'>
        <button class='btn btn-outline'>Hover me</button>

        <ul class='dropdown-content menu-horizontal menu bg-base-100 rounded-box absolute z-1 ml-0 hidden p-2 shadow-sm w-max'>
          <li><a>SubItem 1</a></li>
          <li><a>SubItem 2</a></li>
          <li><a>SubItem 3</a></li>
        </ul>
      </div>

      <ul class='menu bg-base-100 rounded-box w-56'>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li class='dropdown-right hover:[&>ul]:flex'>
          <a class='flex justify-between'
            >Item 3

            <svg
              xmlns='http://www.w3.org/2000/svg'
              width='16'
              height='16'
              viewBox='0 0 24 24'
              fill='none'
              stroke='currentColor'
              stroke-width='2'
              stroke-linecap='round'
              stroke-linejoin='round'
              class='lucide lucide-chevron-right'><path d='m9 18 6-6-6-6'></path></svg
            >
          </a>
          <ul class='dropdown-content menu bg-base-100 rounded-box absolute z-1 ml-0 hidden w-52 p-2 shadow-sm'>
            <li><a>SubItem 1</a></li>
            <li><a>SubItem 2</a></li>
            <li><a>SubItem 3</a></li>
          </ul>
        </li>
      </ul>
</div>

document.body.classList.add('bg-[#1a1d21]', 'h-screen');