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

Sticky Navigation 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 고정 탐색 구성 요소로, 어두운 테마를 특징으로 하며 임의의 자리 표시자 이미지와 아바타를 포함합니다.

미리 보기

HTML 코드 

<nav class="bg-white dark:bg-gray-800 shadow-lg fixed w-full z-10">
    <div class="max-w-7xl mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
        </div>
        <div>
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">About</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Services</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="pt-16">
    <header class="bg-gray-100 dark:bg-gray-900 h-screen flex items-center justify-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to My Website</h2>
    </header>
    <section class="p-8">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Gallery</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded shadow-lg">
        </div>
    </section>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1f2937;
        }
    }
</style>

관련 구성 요소

스티키 내비게이션 컴포넌트 - Neumorphic Pastel

Neumorphism 디자인 스타일과 파스텔 색 구성표가 있는 복잡하고 끈적한 탐색 구성 요소로, 문서 또는 Wiki 사이트에 적합합니다. 중첩된 탐색 항목, 검색 창 및 다크 모드 지원 기능이 있으며, 모두 완전한 응답성을 위해 HTML 및 Tailwind CSS로 구현됩니다.

열다

Sticky Navigation 구성 요소

미니멀한 디자인, 트라이어딕 색 구성표 및 어두운 테마 지원을 갖춘 반응형 고정 탐색 구성 요소로 소셜 미디어 애플리케이션에 적합합니다.

열다

Sticky Navigation 구성 요소

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

열다