CCHub Logo CCHub Tailwind Collection
구성 요소 항행 3D 탐색 구성 요소

3D 탐색 구성 요소

전자 상거래를 위해 설계된 반응형 3D 탐색 구성 요소로, 회색조 색 구성표와 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-5 transition-transform transform hover:scale-105">
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <h1 class="text-gray-800 dark:text-white text-xl font-bold ml-3">Brand</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
    </div>
    <button class="md:hidden text-gray-800 dark:text-gray-200 p-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-600">
      <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 12h16m-7 6h7" />
      </svg>
    </button>
  </div>

  <div class="mt-4 md:hidden">
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
  </div>

  <div class="mt-5 flex">
    <input type="text" placeholder="Search..." class="flex-1 p-2 rounded-lg border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 placeholder-gray-400 dark:placeholder-gray-500" />
    <button class="ml-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 p-2 rounded-lg shadow hover:shadow-lg transition duration-300">
      <img class="w-5 h-5" src="https://picsum.photos/seed/pic1/30/30" alt="Search Icon" />
    </button>
  </div>
</nav>

관련 구성 요소

브루탈리즘 전자상거래 내비게이션

전자 상거래를 위한 브루탈리즘 스타일의 탐색 구성 요소로, Tailwind CSS로 구축된 회색조 색 구성표, 복잡한 레이아웃, 응답성 및 다크 모드 지원을 특징으로 합니다.

열다

Gradient_Corporate_Blues_Navigation_Component

비영리/자선 웹 사이트를 위해 설계된 복잡하고 반응이 빠른 탐색 구성 요소로, 그라데이션 기업 블루 톤, 부드러운 전환 및 다크 모드 지원을 제공합니다. 로고, 탐색 링크, 클릭 유도문안 버튼 및 모바일 메뉴가 포함되어 있습니다.

열다

Navigation 구성 요소

교육 플랫폼에 적합한 깨끗하고 전문적이며 반응이 빠른 탐색 모음으로, 트라이어딕 색 구성표, 다크 모드 지원, 일반적인 탐색 링크 및 클릭 유도문안 버튼이 있는 간단한 레이아웃을 특징으로 합니다.

열다