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>

관련 구성 요소

Navigation Bar 구성 요소

Microinteractions가 있는 반응형 탐색 모음과 Tailwind CSS를 사용한 다크 모드 지원.

열다

Cyberpunk_Retro_Food_Navbar

음식/레스토랑 웹사이트를 위해 설계된 사이버펑크 레트로 미학이 있는 간단하고 반응이 빠른 탐색 모음입니다. 어두운 배경, 음소거된 강조 색상 및 어두운 모드 지원이 특징입니다.

열다

포트폴리오 탐색 모음

어두운 테마를 지원하는 반응형 탐색 모음으로, 머티리얼 디자인 원칙과 흙색 색 구성표를 사용하는 포트폴리오 웹사이트용으로 설계되었습니다. 여기에는 브랜드 로고, 탐색 링크 및 클릭 유도문안 버튼이 포함됩니다. 디자인은 적당히 복잡하며 다양한 화면 크기에 맞게 조정됩니다.

열다