구성 요소 탐색 모음 스큐어모픽 내비게이션 바

스큐어모픽 내비게이션 바

스큐어모픽 스타일과 파스텔 색 구성표로 디자인된 포트폴리오 탐색 모음 구성 요소로, 어두운 모드 지원을 포함합니다. 링크 및 드롭다운 메뉴와 같은 대화형 요소가 있습니다.

미리 보기

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>

관련 구성 요소

아르데코 네비게이션 바

아르데코에서 영감을 받은 반응형 CRM/비즈니스 도구를 위한 탐색 모음으로, 기하학적 패턴, 풍부한 보석 색조 및 다크 모드 지원을 특징으로 합니다. 대화형 요소를 포함하여 중간 정도의 복잡성으로 설계되었습니다.

열다

Navigation Bar 구성 요소

매력적인 마이크로 인터랙션이 있는 반응형 탐색 모음으로, 전자 상거래를 위해 설계되었으며, 어두운 테마와 흙색 색상을 사용합니다.

열다

미니멀리스트 네비게이션 바

미니멀한 스타일로 디자인된 반응형 탐색 모음 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 활용합니다.

열다