CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 모음 블로그 탐색 모음

블로그 탐색 모음

블로그/콘텐츠 웹사이트에 대한 다크 모드 지원 기능이 있는 반응형 탐색 모음. 파스텔 색상의 미니멀리스트/플랫 디자인이 특징입니다.

미리 보기

HTML 코드 

<nav class="bg-pink-100 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white">My Blog</a>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Blog</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a>
    </div>
  </div>
</nav>

관련 구성 요소

Navigation Bar 구성 요소

Microinteractions가 있는 반응형 탐색 모음과 Tailwind CSS를 사용한 다크 모드 지원.

열다

포트폴리오 탐색 모음

어두운 테마를 지원하는 반응형 탐색 모음으로, 머티리얼 디자인 원칙과 흙색 색 구성표를 사용하는 포트폴리오 웹사이트용으로 설계되었습니다. 여기에는 브랜드 로고, 탐색 링크 및 클릭 유도문안 버튼이 포함됩니다. 디자인은 적당히 복잡하며 다양한 화면 크기에 맞게 조정됩니다.

열다

Luxury_Premium_Dating_Social_NavBar

데이트/소셜 플랫폼을 위한 고급스러운/프리미엄 스타일의 탐색 모음으로, 우아한 타이포그래피, 고대비 색 구성표, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 프로필 아바타 및 알림 아이콘과 같은 대화형 요소가 포함됩니다.

열다