CCHub Logo CCHub Tailwind Collection
구성 요소 고정 탐색 Sticky Navigation 구성 요소

Sticky Navigation 구성 요소

미니멀한 평면 디자인, 비즈니스/기업 웹사이트를 위한 단색 색 구성표가 있는 끈적한 탐색 구성 요소입니다. 디자인에는 여러 대화형 요소가 포함되어 있으며 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<header class="bg-white dark:bg-gray-800 fixed top-0 inset-x-0 shadow-md z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40/40" alt="Logo" class="w-10 h-10 rounded-full">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Business Name</h1>
        </div>
        <nav class="hidden md:flex space-x-8">
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Contact</a>
        </nav>
        <a href="#" class="hidden md:block bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition duration-150">Get Started</a>
        <button class="md:hidden flex items-center justify-center p-2 text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none" aria-label="Toggle menu">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 6h14M3 10h14M3 14h14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
            </svg>
        </button>
    </div>
</header>

<main class="mt-16 p-4">
    <section class="bg-gray-100 dark:bg-gray-900 p-8 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Business</h2>
        <p class="text-gray-600 dark:text-gray-400">We provide exceptional services to help you grow your business.</p>
        <img src="https://picsum.photos/800/400" alt="Business Image" class="mt-4 rounded-lg shadow-md">
    </section>
</main>

관련 구성 요소

Sticky Navigation 구성 요소

뉴스/저널리즘 웹사이트용으로 설계된 스큐어모픽 스티커 내비게이션 구성 요소로, 밝은 액센트 색상, 응답성 및 다크 모드 지원이 있는 흑백 색 구성표를 특징으로 합니다. 실제 버튼과 오목한 요소를 모방합니다.

열다

Sticky Navigation 구성 요소

마켓플레이스에 적합한 간단하고 반응이 빠르며 끈적한 탐색 모음으로, 유사한 색 구성표와 다크 모드 지원을 특징으로 합니다. 호버링에 대한 미묘한 마이크로 상호 작용이 포함됩니다.

열다

Sticky Navigation 구성 요소

소셜 미디어 인터페이스를 위해 설계된 생생한 색상의 복잡한 스큐어모픽 끈적한 탐색 모음입니다. Tailwind CSS를 사용한 반응형 디자인 및 다크 모드 지원이 포함됩니다. 프로필 이미지, 검색 창, 알림 및 메시징 아이콘을 제공합니다.

열다