스큐어모픽 내비게이션
Skeuomorphic 디자인의 간단하고 반응이 빠른 탐색 구성 요소, 소셜 미디어 응용 프로그램에 적합한 유사한 색 구성표, 어두운 테마 지원.
HTML 코드
<nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Home
</div>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Profile
</div>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Messages
</div>
</a>
</div>
</div>
</nav>관련 구성 요소
스큐어모픽 내비게이션 컴포넌트(Skeuomorphic Navigation Component)
스큐어모픽 스타일로 디자인된 탐색 구성 요소로, 보색 구성표를 특징으로 하며, 데이터 시각화 및 제어판이 있는 대시보드에 적합합니다. 여기에는 사용자 참여를 위한 대화형 요소가 포함되어 있습니다.