Creating a Responsive Navigation Bar Using TailwindCSS

모바일

PC

<nav id="nav" className="w-full bg-blue-700 bg-gradient-to-t to-blue-800 from-blue-900">
  <div id="navBar" className="w-full h-16 max-w-screen-xl mx-auto">
    <div id="navFlex" className="flex flex-row items-center justify-between">
      <div id="left" className="pl-3 h-16 flex flex-row items-center gap-x-3">
        <div id="drawerOpener" className="lg:hidden">
          <HiMenu className="text-white text-2xl" /> <!-- 햄버거 아이콘 -->
        </div>
        <div id="logo">
          <h1 className="font-sans font-bold text-2xl text-transparent bg-clip-text bg-gradient-to-t from-blue-50 to-white"> <!-- 텍스트 로고 -->
            로고
          </h1>
          {/* <img src="/logo.gif" alt="logo" className="h-9 w-auto" /> */}
        </div>
        <div id="navItems" className="hidden lg:block flex flex-row text-blue-200">
          <Link to="" className="h-16 inline-flex flex-row items-center px-2 mx-1 hover:text-blue-50">
            메뉴0
          </Link>
          <Link
            to=""
            className="h-16 inline-flex flex-row items-center px-2 mx-1 hover:text-blue-50 border-b-4 border-blue-50"
          >
            메뉴1
          </Link>
          <Link to="" className="h-16 inline-flex flex-row items-center px-2 mx-1 hover:text-blue-50">
            메뉴2
          </Link>
          <Link to="" className="h-16 inline-flex flex-row items-center px-2 mx-1 hover:text-blue-50">
            메뉴3
          </Link>
          <Link to="" className="h-16 inline-flex flex-row items-center px-2 mx-1 hover:text-blue-50">
            메뉴4
          </Link>
        </div>
      </div>
      <div id="right" className="pr-3 h-16 flex flex-row items-center gap-x-3">
        <button id="login" className="text-sm text-black rounded-3xl bg-white px-4 py-2">
          로그인
        </button>
      </div>
    </div>
  </div>
</nav>