Sticky Navigation 구성 요소

마이크로 인터랙션과 트라이어드 색 구성표로 설계된 반응형 고정 탐색 모음으로, 블로그 및 콘텐츠 소비에 적합합니다.

미리 보기

HTML 코드

<header class="bg-blue-300 dark:bg-blue-800 fixed top-0 w-full shadow-md z-10 transition-all duration-300 ease-in-out">
    <div class="flex justify-between items-center p-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold transition-transform transform hover:scale-105">MyBlog</a>
        <nav class="space-x-4">
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Blog</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="bg-blue-400 dark:bg-blue-700 h-1 transition-all duration-300 ease-in-out" style="transform: scaleY(0.5);"></div>
</header>

<main class="pt-20 px-4">
    <section class="my-8">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Latest Articles</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
        </div>
    </section>
</main>

<footer class="bg-gray-300 dark:bg-gray-700 p-4 text-center">
    <p class="text-gray-800 dark:text-gray-200">&copy; 2023 MyBlog. All rights reserved.</p>
</footer>

Sticky Navigation 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Sticky Navigation 컴포넌트 - Neumorphism

레트로 이커머스 스티키 내비게이션

Sticky Navigation 구성 요소