포트폴리오 탐색 모음
어두운 테마를 지원하는 반응형 탐색 모음으로, 머티리얼 디자인 원칙과 흙색 색 구성표를 사용하는 포트폴리오 웹사이트용으로 설계되었습니다. 여기에는 브랜드 로고, 탐색 링크 및 클릭 유도문안 버튼이 포함됩니다. 디자인은 적당히 복잡하며 다양한 화면 크기에 맞게 조정됩니다.
HTML 코드
<nav class="bg-white dark:bg-gray-800 shadow-md">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<a href="#" class="flex items-center py-4 px-2">
<span class="text-gray-800 dark:text-white text-lg font-bold">Portfolio</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Home</a>
<a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Projects</a>
<a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">About</a>
<a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Contact</a>
</div>
</div>
<div class="hidden md:flex items-center space-x-3 ">
<a href="#" class="py-2 px-2 font-medium text-gray-500 dark:text-gray-300 rounded hover:bg-green-500 dark:hover:bg-green-400 hover:text-white dark:hover:text-white transition duration-300">Log In</a>
<a href="" class="py-2 px-2 font-medium text-white bg-green-500 dark:bg-green-400 rounded hover:bg-green-400 dark:hover:bg-green-500 transition duration-300">Sign Up</a>
</div>
<div class="-mr-2 flex md:hidden">
<button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 dark:hover:bg-gray-700 dark:focus:bg-gray-700">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div class="mobile-menu hidden md:hidden">
<a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
<a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
<a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
<a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
</div>
</nav> 관련 구성 요소
Gradient/Color Transitions(그라디언트/색상 전환), Grayscale Dashboard, Navigation Bar(그레이스케일 대시보드, 네비게이션 바)
대시보드를 위한 복잡하고 반응이 빠른 탐색 모음으로, 그레이스케일 색 구성표의 그라데이션 전환을 특징으로 합니다. 여러 대화형 요소와 완전한 다크 모드 지원이 포함됩니다.