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

Sticky Navigation 구성 요소

스큐어모픽 스타일로 설계된 고정 탐색 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 전자 상거래 웹 사이트에 적합합니다.

미리 보기

HTML 코드 

<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg py-4 fixed w-full z-10">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 rounded-lg" />
            <h1 class="text-lg text-white font-bold">ShopEasy</h1>
        </div>
        <div class="hidden md:flex md:space-x-8">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Products</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">About Us</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="h-8 w-8 rounded-full" />
            </a>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Cart</button>
        </div>
    </div>
</nav>

<main class="pt-24">
    <h2 class="text-3xl text-gray-800 dark:text-gray-200 text-center my-8">Welcome to ShopEasy!</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-8">Discover amazing products with unbeatable prices.</p>
    <div class="flex justify-center space-x-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="rounded-lg shadow-md" />
    </div>
</main>

관련 구성 요소

Sticky Navigation 구성 요소

전자 상거래를 위한 끈적끈적한 탐색 구성 요소로, 생생한 색상의 미니멀리스트/플랫 디자인이 특징입니다. 여기에는 로고, 검색 창, 장바구니 아이콘 및 사용자 아바타가 포함되며 모두 응답성과 어두운 테마 지원을 위해 Tailwind CSS로 스타일이 지정되었습니다.

열다

Retro_Vintage_Sticky_Navigation_Component

이벤트 또는 컨퍼런스 웹 사이트를 위해 설계된 복잡한 레트로/빈티지에서 영감을 받은 스티커 탐색 모음으로, 부드러운 파스텔 색상, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다. 여기에는 로고, 탐색 링크, 클릭 유도문안 버튼 및 검색 아이콘이 포함됩니다.

열다

Sticky Navigation 구성 요소

소셜 미디어 인터페이스에 적합한 브루탈리즘 스타일의 끈적끈적한 탐색 구성 요소로, 대담한 고대비 디자인과 다크 모드 지원을 특징으로 합니다.

열다