Sticky Navigation 구성 요소
미니멀한 디자인, 트라이어딕 색 구성표 및 어두운 테마 지원을 갖춘 반응형 고정 탐색 구성 요소로 소셜 미디어 애플리케이션에 적합합니다.
HTML 코드
<nav class="sticky top-0 bg-white dark:bg-gray-800 p-4 shadow-md z-50">
<div class="container mx-auto flex justify-between items-center">
<!-- Logo/Brand Name -->
<a href="#" class="text-blue-500 dark:text-blue-300 text-2xl font-bold">SocialLink</a>
<!-- Navigation Links -->
<div class="flex space-x-6">
<a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Feed</a>
<a href="#" class="text-violet-500 dark:text-violet-300 hover:text-violet-700 dark:hover:text-violet-500 transition duration-300">Profile</a>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-500 transition duration-300">Messages</a>
<a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Notifications</a>
</div>
<!-- Search Bar (Optional) -->
<div class="hidden md:block">
<input type="text" placeholder="Search..." class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<!-- User Avatar (Optional) -->
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-300">
<span class="text-gray-700 dark:text-gray-300 hidden sm:block">John Doe</span>
</div>
</div>
</nav>관련 구성 요소
Sticky Navigation 구성 요소
스큐어모픽 스타일로 설계된 고정 탐색 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 전자 상거래 웹 사이트에 적합합니다.
Sticky Navigation 구성 요소
블로그를 위한 미니멀하고 반응이 빠른 끈적한 탐색 모음으로, 생생한 색 구성표를 특징으로 합니다. 다크 모드를 지원하며 왼쪽에는 "블로그 제목", 오른쪽에는 탐색 링크가 있는 간단하고 깔끔한 레이아웃이 있습니다. 탐색 모음은 사용자가 스크롤할 때 뷰포트 맨 위에 고정됩니다.