CCHub Logo CCHub Tailwind Collection
구성 요소 항행 Navigation 구성 요소

Navigation 구성 요소

반응형 다크 모드 탐색 구성 요소는 파스텔 색 구성표와 단순한 레이아웃으로 전자 상거래를 위해 설계되었습니다.

미리 보기

HTML 코드 

<nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
        </div>
    </div>
</nav>

관련 구성 요소

Monospace 헬스케어 내비게이션

헬스케어/의료 애플리케이션을 위한 복잡하고 반응이 빠른 내비게이션 구성 요소로, 따뜻한 중립색, 다크 모드 지원 및 대화형 요소가 있는 모노스페이스/개발자에서 영감을 받은 디자인을 특징으로 합니다.

열다

Neumorphic Navigation 컴포넌트

뉴모픽 디자인 스타일을 가진 단순하고 반응이 빠른 탐색 구성 요소로, 포럼 또는 커뮤니티 플랫폼에 적합한 보라색/보라색 색 구성표를 사용합니다. 다크 모드 지원이 포함됩니다.

열다

모노스페이스 소셜 미디어 네비게이션

소셜 미디어 애플리케이션을 위한 복잡하고 반응이 빠른 탐색 구성 요소로, 음소거된 색상과 어두운 모드를 지원하는 고정 공간/개발자 미학을 특징으로 합니다. 사용자 프로필, 검색, 알림 및 기본 탐색 링크가 포함됩니다.

열다