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

Navigation Enhancement 구성 요소

다크 모드 지원 및 반응형 디자인을 갖춘 Neumorphism 스타일의 탐색 구성 요소

미리 보기

HTML 코드 

<nav class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-4 flex flex-col md:flex-row items-center justify-between transition-all duration-300">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full shadow-md mb-2">
        <span class="text-xl font-semibold text-gray-800 dark:text-gray-200 ml-2">Brand Name</span>
    </div>
    <div class="flex flex-col md:flex-row md:space-x-4 mt-4 md:mt-0">
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Services</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Contact</a>
    </div>
    <div class="mt-4 md:mt-0">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md">
    </div>
</nav>

관련 구성 요소

전자 상거래, 산업 내비게이션

원자재와 노출된 요소가 미학적으로 특징적인 복잡한 산업 스타일의 전자 상거래 내비게이션 구성 요소입니다. 밝은 액센트가 있는 흑백 구성표가 특징이며 다크 모드 지원으로 완벽하게 반응합니다.

열다

Navigation Enhancement 구성 요소

Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 탐색 구성 요소로, 로고, 이미지 및 아바타에 대한 자리 표시자가 있습니다.

열다

Industrial_Monochromatic_Navigation

산업 및 제조 기업을 위한 복잡한 다크 모드 중심의 내비게이션 구성 요소로, 단색 디자인과 대시보드 및 운영 인터페이스에 적합한 여러 대화형 요소를 갖추고 있습니다.

열다