Sticky Navigation 구성 요소
머티리얼 디자인 가이드라인을 따르는 반응형 고정 탐색 메뉴로, 다크 모드를 제공합니다.
HTML 코드
<header class="bg-white dark:bg-gray-800 shadow fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<div class="container mx-auto p-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full">
<h1 class="ml-2 text-xl font-semibold text-gray-800 dark:text-white">MyWebsite</h1>
</div>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Services</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="pt-16 bg-gray-100 dark:bg-gray-900">
<section class="container mx-auto py-10">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Welcome to MyWebsite</h2>
<p class="text-gray-700 dark:text-gray-300">This is a simple sticky navigation component built with Tailwind CSS. Scroll down to see the sticky effect in action.</p>
<div class="mt-10 space-y-4">
<div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
<div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
<div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
</div>
</section>
</main>관련 구성 요소
Sticky Navigation 컴포넌트 - Neumorphism
Neumorphism 디자인, 보색 구성표 및 어두운 테마 지원을 갖춘 반응형 고정 탐색 구성 요소로, 포트폴리오 웹 사이트에 적합합니다. 다크 모드 클래스와 함께 Tailwind CSS를 사용하고 Neumorphism 효과에 대한 미묘한 그림자를 포함합니다.