CCHub Logo CCHub Tailwind Collection
구성 요소 항행 레트로내비

레트로내비

레트로/빈티지 디자인, 생생한 색 구성표 및 최소한의 요소를 갖춘 단순하고 반응이 빠른 다크 모드 호환 탐색 구성 요소로 전자 상거래 웹 사이트에 적합합니다.

미리 보기

HTML 코드 

<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white text-2xl font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Products</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white">
        <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>

관련 구성 요소

Glassmorphism Navigation 컴포넌트

전자 상거래 사이트를 위한 glassmorphism 스타일의 탐색 구성 요소로, 단색 색상, 반응형 디자인 및 Tailwind CSS를 사용한 다크 모드 지원을 특징으로 합니다.

열다

3D 탐색 구성 요소

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

열다

Navigation 구성 요소

마이크로 인터랙션과 파스텔 색 구성표가 있는 블로그를 위해 설계된 간단한 탐색 구성 요소입니다. 반응형 레이아웃과 어두운 테마 지원이 특징입니다.

열다