CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 모음 스큐어모픽 내비게이션 바

스큐어모픽 내비게이션 바

스큐어모픽 디자인 스타일의 소셜 미디어를 위한 간단한 반응형 탐색 모음으로, 유사한 색 구성표를 활용하고 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
        </div>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
        </ul>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
        </div>
    </div>
</nav>

관련 구성 요소

탐색 모음

Tailwind CSS를 사용하는 다크 모드의 반응형 탐색 모음 구성 요소

열다

Neon_Glow_Navbar_Music_Audio

음악/오디오 플랫폼을 위한 복잡하고 반응이 빠른 탐색 모음 구성 요소로, 네온/글로우 효과와 따뜻한 무채색 구성표를 특징으로 합니다. 다크 모드 지원 및 대화형 요소가 포함되어 있습니다.

열다

Artsy_Neon_Crypto_Navbar

암호화폐/블록체인 애플리케이션을 위한 복잡하고 반응이 빠른 탐색 모음으로, 예술적인 수채화에서 영감을 받은 디자인과 밝은 네온 색상 구성표가 있습니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다