[ComponenMobile terminal navigation style problemt name] [description of the issue] about tw-elements HOT 3 OPEN

<div style="position: relative;width:100%;"
  class="sm:container sm:mx-auto flex flex-wrap items-center justify-between  px-4">

  <!-- Logo -->
  <div>
    <a class="mx-2 my-1 flex items-center text-neutral-900 hover:text-neutral-900 focus:text-neutral-900 lg:mb-0 lg:mt-0"
      href="/">
      <img src="/images/logo.png" style="height: 30px left: 10px;" alt="CCF" loading="lazy" />
    </a>
  </div>
  <!-- Hamburger button for mobile view -->
  <button
    class="block border-0 bg-transparent px-2 text-neutral-200 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
    type="button" data-te-collapse-init data-te-target="#navbarSupportedContent8"
    aria-controls="navbarSupportedContent8" aria-expanded="false" aria-label="Toggle navigation"
    style="position:absolute;top:10px; right:15px;">
    <!-- Hamburger icon -->
    <span class="[&>svg]:w-7 ">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 ">
        <path fill-rule="evenodd"
          d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
          clip-rule="evenodd" />
      </svg>
    </span>
  </button>

  <!-- Collapsible navbar container -->
  <div
    class="!visible mt-2 hidden flex-grow basis-[100%] items-center justify-center lg:mt-0 lg:!flex lg:basis-auto "
    id="navbarSupportedContent8" data-te-collapse-item>
    <!-- Left links -->
    <ul class="list-style-none flex flex-col pl-0 lg:mt-1 lg:flex-row " data-te-navbar-nav-ref>
      <!-- Home link -->
      <li class="my-4  pl-2 lg:my-0 lg:pl-2 lg:pr-4" data-te-nav-item-ref>
        <NuxtLink to="/"
          class="p-0 text-neutral-200 transition duration-200 hover:text-blue-300 hover:ease-in-out focus:text-yellow-500 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400">
          首页</NuxtLink>
      </li>
      <li class="my-4  pl-2 lg:my-0 lg:pl-2 lg:pr-4" data-te-nav-item-ref>
        <NuxtLink to="/introduction"
          class="p-0 text-neutral-200 transition duration-200 hover:text-blue-300 hover:ease-in-out focus:text-yellow-500 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400">
          大会介绍</NuxtLink>
      </li>

      <!-- Link -->
      <li class="mb-4 pl-2 lg:mb-0 lg:pl-0 lg:pr-4" data-te-nav-item-ref>
        <NuxtLink to="#"
          class="p-0 text-neutral-200 transition duration-200 hover:text-blue-300 hover:ease-in-out focus:text-yellow-500 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400">
          征稿通知</NuxtLink>
      </li>
    </ul>
  </div>
</div>