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>관련 구성 요소
고정 탐색 컴포넌트 - 다크 모드 파스텔
다크 모드용으로 설계된 고정 탐색 모음으로, 반응형 레이아웃과 파스텔 색상 액센트가 특징입니다. 탐색 모음은 사용자가 스크롤할 때 뷰포트 맨 위에 유지되어 콘텐츠가 많은 페이지의 사용성을 향상시킵니다. 여기에는 로고 또는 사이트 제목에 대한 자리 표시자와 탐색 링크가 포함되어 있으며, 현대적이고 깔끔한 모양을 위해 Tailwind CSS로 스타일이 지정되었습니다.