스큐어모픽 내비게이션 바
스큐어모픽 스타일과 파스텔 색 구성표로 디자인된 포트폴리오 탐색 모음 구성 요소로, 어두운 모드 지원을 포함합니다. 링크 및 드롭다운 메뉴와 같은 대화형 요소가 있습니다.
HTML 코드
<nav class="bg-white dark:bg-gray-800 shadow-lg p-4 rounded-lg flex items-center justify-between"> <div class="flex items-center space-x-4"> <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full"> <span class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</span> </div> <ul class="flex space-x-6"> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Home</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">About</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Portfolio</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Contact</a></li> </ul> <div class="relative"> <button class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200 focus:outline-none"> Menu <span class="inline-flex items-center justify-center w-3 h-3 bg-gray-800 dark:bg-white rounded-full"></span> </button> <ul class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg hidden" id="dropdown-menu"> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Profile</a></li> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Settings</a></li> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Logout</a></li> </ul> </div> <button class="hidden md:block text-gray-800 dark:text-white border border-gray-400 dark:border-gray-600 rounded-lg px-4 py-2 hover:bg-pink-500 dark:hover:bg-pink-400 transition ease-in-out duration-200">Get Started</button></nav>