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를 사용한 다크 모드 지원.

열다

Navigation Bar 구성 요소

대시보드용 반응형 탐색 모음으로, 어스 톤의 다크 모드 테마를 특징으로 합니다. 로고, 탐색 링크, 검색 창 및 사용자 프로필 섹션이 포함됩니다. 대화형 요소를 사용하여 중간 정도의 복잡성을 제공하도록 설계되었습니다.

열다