CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 구성 요소 레트로 전자 상거래 탐색 모음

레트로 전자 상거래 탐색 모음

전자 상거래를 위한 레트로/빈티지 스타일의 그레이스케일 탐색 구성 요소로, 호버 및 드롭다운과 같은 대화형 요소를 통해 중간 정도의 복잡성을 특징으로 합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="text-lg font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
      <div class="relative group">
        <button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button>
        <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48">
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
    </div>
    <div class="flex items-center space-x-4">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      </a>
      <button class="md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
  </nav>

관련 구성 요소

장난기 넘치는 회색조 Crypto Navigation 구성 요소

암호화폐 및 블록체인 애플리케이션을 위한 재미있고 친근한 그레이스케일 탐색 구성 요소로, 둥근 요소, 대화형 상태, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

열다

소셜 미디어 내비게이션

포레스트 그린 팔레트가 있는 깔끔하고 미니멀한 소셜 미디어 탐색 구성 요소로, 반응형 레이아웃과 다크 모드를 위해 설계되었습니다. 기본 탐색, 사용자 프로필 및 검색 기능을 제공합니다.

열다

스큐어모픽 내비게이션 컴포넌트(Skeuomorphic Navigation Component)

스큐어모픽 스타일로 디자인된 탐색 구성 요소로, 보색 구성표를 특징으로 하며, 데이터 시각화 및 제어판이 있는 대시보드에 적합합니다. 여기에는 사용자 참여를 위한 대화형 요소가 포함되어 있습니다.

열다