CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 구성 요소 Navigation 구성 요소

Navigation 구성 요소

Microinteractions로 디자인된 반응형 탐색 구성 요소로, 사용자 작업을 기반으로 매력적인 애니메이션을 제공하여 밝은 테마와 어두운 테마를 모두 지원합니다. 구성 요소에는 프로필 아바타, 탐색 링크 및 호버 효과가 포함됩니다.

미리 보기

HTML 코드 

<nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
        <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
    </div>
</nav>

관련 구성 요소

Brutalism Navigation 구성 요소

브루탈리즘 스타일로 디자인된 반응형 탐색 구성 요소로, 단색 색 구성표를 보여 주며 포트폴리오 웹 사이트에 이상적입니다. 기능에는 고대비의 대담한 레이아웃, Tailwind CSS를 사용한 다크 모드 지원, 드롭다운 또는 버튼 링크와 같은 대화형 요소가 포함됩니다.

열다

구인공광고내비게이션

구인 게시판 또는 경력 개발 플랫폼을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 바다/파란색 톤, 호버링의 마이크로 인터랙션, 다크 모드 지원을 제공합니다.

열다

탐색 구성 요소

전자 상거래 웹 사이트를 위한 미니멀한 탐색 구성 요소로, 로고, 검색 창, 탐색 링크, 장바구니 아이콘 및 Tailwind CSS를 사용하는 사용자 아바타를 특징으로 합니다. 이 구성 요소는 반응형 디자인과 다크 모드를 지원합니다.

열다