Menu

<a
  class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white group hover:opacity-80 focus:opacity-80 aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 bg-transparent hover:bg-black-50 dark:hover:bg-black-800"
  href="#">
  <svg
    width="20"
    height="20"
    viewbox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M5.35714 8.125L1.875 10L5.35714 11.875M5.35714 8.125L10 10.625L14.6429 8.125M5.35714 8.125L1.875 6.25L10 1.875L18.125 6.25L14.6429 8.125M14.6429 8.125L18.125 10L14.6429 11.875M14.6429 11.875L18.125 13.75L10 18.125L1.875 13.75L5.35714 11.875M14.6429 11.875L10 14.375L5.35714 11.875"
      stroke="currentColor"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round">
    </path>
  </svg>
  <span class="menu-item-text">
    Menu
  </span>
</a>

<button
  name="button"
  type="button"
  class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white group hover:opacity-80 focus:opacity-80 aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 bg-transparent hover:bg-black-50 dark:hover:bg-black-800"
  aria-expanded="false"
  onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
  <svg
    width="20"
    height="20"
    viewbox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M5.35714 8.125L1.875 10L5.35714 11.875M5.35714 8.125L10 10.625L14.6429 8.125M5.35714 8.125L1.875 6.25L10 1.875L18.125 6.25L14.6429 8.125M14.6429 8.125L18.125 10L14.6429 11.875M14.6429 11.875L18.125 13.75L10 18.125L1.875 13.75L5.35714 11.875M14.6429 11.875L10 14.375L5.35714 11.875"
      stroke="currentColor"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round">
    </path>
  </svg>
  <span class="menu-item-text">
    Menu
  </span>
  <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M6 9L12 15L18 9"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </div>
</button>

<div class="flex flex-col gap-8px group">
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white group hover:opacity-80 focus:opacity-80 aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 bg-transparent hover:bg-black-50 dark:hover:bg-black-800 min-w-[180px]"
    aria-expanded="false"
    onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
    <svg
      width="20"
      height="20"
      viewbox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M5.35714 8.125L1.875 10L5.35714 11.875M5.35714 8.125L10 10.625L14.6429 8.125M5.35714 8.125L1.875 6.25L10 1.875L18.125 6.25L14.6429 8.125M14.6429 8.125L18.125 10L14.6429 11.875M14.6429 11.875L18.125 13.75L10 18.125L1.875 13.75L5.35714 11.875M14.6429 11.875L10 14.375L5.35714 11.875"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
    <span class="menu-item-text">
      Menu
    </span>
    <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
      <svg
        width="24"
        height="24"
        viewbox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M6 9L12 15L18 9"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
    </div>
  </button>
  <div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[aria-expanded=true]]:max-h-[200px] group-has-[button[aria-expanded=true]]:opacity-100">
    <div class="flex sm:ps-12px">
      <div class="flex py-4px ps-[10px] pe-0 sm:pe-[10px]">
        <div class="w-[1px] bg-black-200">
        </div>
      </div>
      <div class="flex flex-col gap-4px grow-1">
        <a
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white group hover:opacity-80 focus:opacity-80 aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 bg-transparent hover:bg-black-50 dark:hover:bg-black-800 whitespace-break-spaces!"
          href="#">
          <span class="menu-item-text">
            Item 1
          </span>
        </a>
        <a
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white group hover:opacity-80 focus:opacity-80 aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 bg-transparent hover:bg-black-50 dark:hover:bg-black-800 whitespace-break-spaces!"
          href="#">
          <span class="menu-item-text">
            Item 2
          </span>
        </a>
        <a
          class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white group hover:opacity-80 focus:opacity-80 aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 bg-transparent hover:bg-black-50 dark:hover:bg-black-800 whitespace-break-spaces!"
          href="#">
          <span class="menu-item-text">
            Item 3
          </span>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="grid overflow-auto self-baseline w-full max-w-full lg:self-center">
  <header class="flex items-center gap-32px w-full">
    <a
      class="flex text-u1 font-semibold gap-8px items-center py-4px sm:p-8px no-underline text-black dark:text-white logo"
      href="#">
      <svg
        width="24"
        height="24"
        viewbox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <rect
          width="24"
          height="24"
          rx="2"
          fill="black">
        </rect>
        <path
          d="M9.18014 20.625C7.94299 13.8881 7.93689 10.1401 9.18014 3.5"
          stroke="white"
          stroke-width="4">
        </path>
        <path
          d="M12.5 14.5L18.9952 18.25"
          stroke="white"
          stroke-width="4.5">
        </path>
        <circle
          cx="15.25"
          cy="8.25"
          r="3.25"
          fill="white">
        </circle>
      </svg>
      Kaida
    </a>
    <div class="flex items-center gap-64px w-full">
      <nav
        class="hidden md:flex gap-12px items-center list-none"
        data-mobile-open="false">
        <li>
          <button
            name="button"
            type="button"
            class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white group hover:opacity-80 focus:opacity-80 aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 bg-transparent hover:bg-black-50 dark:hover:bg-black-800"
            id="product-dropdown-example-button"
            data-dropdown-toggle="product-dropdown-example"
            aria-expanded="false"
            onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
            <span class="menu-item-text">
              Products
            </span>
            <div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
              <svg
                width="24"
                height="24"
                viewbox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M6 9L12 15L18 9"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round">
                </path>
              </svg>
            </div>
          </button>
        </li>
        <li>
          <a
            class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white group hover:opacity-80 focus:opacity-80 aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 bg-transparent hover:bg-black-50 dark:hover:bg-black-800"
            href="#">
            <span class="menu-item-text">
              Documentation
            </span>
          </a>
        </li>
        <li>
          <a
            class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white group hover:opacity-80 focus:opacity-80 aria-[expanded=true]:bg-black-50 dark:aria-[expanded=true]:bg-black-700 bg-transparent hover:bg-black-50 dark:hover:bg-black-800"
            href="#">
            <span class="menu-item-text">
              About us
            </span>
          </a>
        </li>
      </nav>
      <div class="hidden md:flex gap-12px items-center ms-auto">
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center justify-center whitespace-nowrap py-2px px-8px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-black-100 border-black-100 hover:bg-black-200 hover:border-black-200 focus:bg-black-200 focus:border-black-200 active:bg-black-300 active:border-black-300 dark:bg-black-700 dark:border-black-700 dark:hover:bg-black-600 dark:hover:border-black-600 dark:focus:bg-black-600 dark:focus:border-black-600 dark:active:bg-black-500 dark:active:border-black-500"
          title="Sign in">
          Sign in
        </button>
        <button
          name="button"
          type="button"
          class="flex gap-8px items-center justify-center whitespace-nowrap py-2px px-8px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-white dark:text-black-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-black border-black hover:bg-black-700 hover:border-black-700 focus:bg-black-700 focus:border-black-700 active:bg-black-500 active:border-black-500 dark:bg-white dark:border-white dark:hover:bg-black-200 dark:hover:border-black-200 dark:focus:bg-black-200 dark:focus:border-black-200 dark:active:bg-black-400 dark:active:border-black-400"
          title="Get started">
          Get started
        </button>
      </div>
      <button
        name="button"
        type="button"
        class="flex md:hidden ms-auto text-black dark:text-white"
        data-mobile-open="false">
        <svg
          width="24"
          height="24"
          viewbox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M4 6L20 6"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round">
          </path>
          <path
            d="M4 12L20 12"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round">
          </path>
          <path
            d="M4 18L20 18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round">
          </path>
        </svg>
      </button>
    </div>
    <div
      id="product-dropdown-example"
      class="z-10 hidden flex flex-col gap-2px bg-background dark:bg-black-800 rounded-12px shadow-[0px_6px_20px_0px_#00000017] w-[240px] p-12px">
      <ul
        class="flex flex-col gap-2px text-p2 text-foreground max-h-[180px] overflow-auto"
        aria-labelledby="product-dropdown-example-button">
        <li>
          <a
            href="#"
            class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-black-50 dark:hover:bg-black-700">
            Product 1
          </a>
        </li>
        <li>
          <a
            href="#"
            class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-black-50 dark:hover:bg-black-700">
            Product 2
          </a>
        </li>
        <li>
          <a
            href="#"
            class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-black-50 dark:hover:bg-black-700">
            Product 3
          </a>
        </li>
      </ul>
    </div>
  </header>
</div>