Neumorphism Navigation 컴포넌트
Neumorphism Navigation Component는 포트폴리오 웹 사이트에 최적화되어 있습니다. 여러 대화형 요소가 있는 복잡한 레이아웃, 반응형 디자인, Tailwind CSS를 사용한 다크 모드 지원이 특징입니다. 색 구성표는 유사합니다.
HTML 코드
<nav class="p-6 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<span class="text-xl font-bold text-gray-800 dark:text-gray-200">Your Name</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-600 dark:text-gray-400 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<div class="mobile-menu hidden md:hidden mt-4 space-y-2">
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
<a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
</div>
</nav>
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
}
.shadow-neumorphic-text-light {
text-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
}
.dark .shadow-neumorphic-text-dark {
text-shadow: 2px 2px 5px #333333, -2px -2px 5px #555555;
}
</style>관련 구성 요소
모노스페이스 소셜 미디어 네비게이션
소셜 미디어 애플리케이션을 위한 복잡하고 반응이 빠른 탐색 구성 요소로, 음소거된 색상과 어두운 모드를 지원하는 고정 공간/개발자 미학을 특징으로 합니다. 사용자 프로필, 검색, 알림 및 기본 탐색 링크가 포함됩니다.
3D_Candy_Finance_Navigation
금융/뱅킹 애플리케이션을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 캔디/달콤한 색 구성표와 미묘한 3D 디자인 요소를 특징으로 하며 다크 모드를 지원합니다.