Navigation Enhancement 구성 요소
스큐어모피즘(skeuomorphism)으로 설계된 내비게이션 컴포넌트로, 현실 세계의 요소를 모방한 디지털 요소를 특징으로 합니다. 반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하여 스타일이 지정됩니다.
HTML 코드
<nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 max-w-screen-lg mx-auto transition-all duration-300 ease-in-out">
<div class="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 shadow-md">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
</div>
<div class="space-x-4 hidden md:flex">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<div class="md:flex md:items-center mt-4 space-x-4 hidden">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 shadow-md">
<span class="text-gray-800 dark:text-white">User Name</span>
</div>
</nav>
<!-- Mobile Menu -->
<div class="md:hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mt-2 transition-all duration-300 ease-in-out">
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Home</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">About</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Services</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
</div>
<style>
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: white;
}
}
</style>관련 구성 요소
Navigation Enhancement 구성 요소
브루탈리즘(Brutalism) 미학으로 디자인된 내비게이션 컴포넌트로, 대담한 디자인, 높은 대비, 특이한 레이아웃을 특징으로 합니다. 반응형 효과가 포함되어 있으며 CSS로 어두운 테마를 지원합니다.
Navigation Enhancement 구성 요소
glassmorphism에서 영감을 받은 탐색 구성 요소는 어스 톤과 다크 모드를 지원하는 포트폴리오 작업 및 제품을 보여주기 위해 설계되었습니다. 이 구성 요소는 젖빛 유리 효과, 반응형 디자인 및 최소한의 요소를 특징으로 합니다.