Navigation 구성 요소
블로그를 위한 3D 디자인 스타일의 복잡한 탐색 구성 요소로, 트라이어딕 색 구성표와 반응형 어두운 테마 지원을 특징으로 합니다.
HTML 코드
<nav class="bg-gray-800 p-5 shadow-lg rounded-lg relative overflow-hidden">
<div class="absolute inset-0 transform -translate-x-2 -translate-y-2 bg-gradient-to-r from-blue-500 to-green-500 opacity-20 rounded-lg"></div>
<h1 class="text-white text-3xl font-bold relative z-10">My Blog</h1>
<ul class="flex space-x-4 mt-4">
<li class="relative group">
<a href="#" class="text-blue-300 hover:text-blue-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-blue-500">Home</a>
</li>
<li class="relative group">
<a href="#" class="text-green-300 hover:text-green-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-green-500">About</a>
</li>
<li class="relative group">
<a href="#" class="text-red-300 hover:text-red-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-red-500">Contact</a>
</li>
<li class="relative group">
<a href="#" class="text-yellow-300 hover:text-yellow-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-yellow-500">Blog</a>
</li>
</ul>
<div class="mt-5 flex items-center justify-between">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
<span class="text-white">Welcome, User!</span>
</div>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition ease-in-out duration-300">Search</button>
</div>
</nav>
<!-- Dark Mode Styling -->
<nav class="dark:bg-gray-900 dark:text-gray-200 dark:shadow-2xl">
<div class="dark:bg-gradient-to-r dark:from-blue-600 dark:to-green-600 dark:opacity-30 dark:rounded-lg"></div>
<h1 class="dark:text-white">My Blog</h1>
<ul class="space-x-4">
<li>
<a href="#" class="dark:text-blue-500 hover:dark:text-blue-400">Home</a>
</li>
<li>
<a href="#" class="dark:text-green-500 hover:dark:text-green-400">About</a>
</li>
<li>
<a href="#" class="dark:text-red-500 hover:dark:text-red-400">Contact</a>
</li>
<li>
<a href="#" class="dark:text-yellow-500 hover:dark:text-yellow-400">Blog</a>
</li>
</ul>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="rounded-full">
<span>Welcome, User!</span>
</div>
<button class="bg-blue-600 text-white">Search</button>
</div>
</nav>