CCHub Logo CCHub Tailwind Collection
구성 요소 Navigation Enhancement 구성 요소 Navigation Enhancement 구성 요소

Navigation Enhancement 구성 요소

glassmorphism에서 영감을 받은 탐색 구성 요소는 어스 톤과 다크 모드를 지원하는 포트폴리오 작업 및 제품을 보여주기 위해 설계되었습니다. 이 구성 요소는 젖빛 유리 효과, 반응형 디자인 및 최소한의 요소를 특징으로 합니다.

미리 보기

HTML 코드 

<nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
    </div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
</nav>

<section class="p-8 bg-gray-50 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
        <p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
      </div>
    </div>
    <!-- Repeat similar divs for more projects -->
  </div>
</section>

관련 구성 요소

Cyberpunk_Portfolio_Navigation

포트폴리오를 위한 복잡하고 반응이 빠른 사이버펑크 테마 탐색 구성 요소로, 미래지향적인 네온 퍼플 미학, 어두운 배경 및 인터랙티브 요소를 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다

Playful_Consulting_Navigation_Component

컨설팅/서비스를 위한 단순하고 유쾌하며 유쾌한 탐색 구성 요소로, 둥근 요소, 밝은 액센트가 있는 단색 색 구성표, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.

열다

자연 Inspired_Entertainment_Navigation

엔터테인먼트/미디어 플랫폼을 위한 복잡하고 자연에서 영감을 받은 탐색 구성 요소로, 흐르는 선과 사탕/달콤한 색 구성표가 특징입니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다