구인공광고내비게이션
구인 게시판 또는 경력 개발 플랫폼을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 바다/파란색 톤, 호버링의 마이크로 인터랙션, 다크 모드 지원을 제공합니다.
HTML 코드
<nav class="bg-sky-500 shadow-lg dark:bg-sky-900 py-4">
<div class="container mx-auto px-4 flex justify-between items-center">
<a href="#" class="text-white text-2xl font-bold tracking-tight transform hover:scale-105 transition-transform duration-300 ease-in-out">
JobFind
</a>
<div class="hidden md:flex space-x-6">
<a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
Find Jobs
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
</a>
<a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
Post a Job
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
</a>
<a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
Resume Builder
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
</a>
<a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
Career Advice
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
</a>
</div>
<div class="md:hidden">
<button aria-label="Toggle navigation" class="text-white focus:outline-none focus:ring-2 focus:ring-white rounded">
<svg class="h-6 w-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>
</nav>관련 구성 요소
스큐어모픽 내비게이션 컴포넌트(Skeuomorphic Navigation Component)
스큐어모픽 스타일로 디자인된 탐색 구성 요소로, 보색 구성표를 특징으로 하며, 데이터 시각화 및 제어판이 있는 대시보드에 적합합니다. 여기에는 사용자 참여를 위한 대화형 요소가 포함되어 있습니다.
Navigation Components 컴포넌트
대시보드용 레트로 빈티지 탐색 구성 요소로, 보색, 반응형 디자인, Tailwind CSS를 사용하는 어두운 테마 지원이 있는 복잡한 레이아웃을 특징으로 합니다. 여기에는 로고, 탐색 링크, 검색 창 및 사용자 프로필 정보가 포함됩니다.