CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 구성 요소 구인공광고내비게이션

구인공광고내비게이션

구인 게시판 또는 경력 개발 플랫폼을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 바다/파란색 톤, 호버링의 마이크로 인터랙션, 다크 모드 지원을 제공합니다.

미리 보기

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>

관련 구성 요소

Navigation Components 컴포넌트

Glassmorphism, 단색, 보통, 전자 상거래 내비게이션 구성 요소, 다크 모드 지원

열다

소셜 미디어 탐색 구성 요소

소셜 미디어 애플리케이션을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 어두운 테마와 Material Design에서 영감을 받은 보색 구성표가 있습니다. 여기에는 로고, 탐색 링크 및 사용자 아바타가 포함됩니다.

열다

탐색 구성 요소

브루탈리즘 스타일로 디자인된 탐색 구성 요소로, 소셜 미디어 인터페이스를 위한 파스텔 색 구성표가 특징이며, 반응형 레이아웃과 어두운 테마 지원을 제공합니다.

열다