Sticky Navigation 구성 요소
날씨/기후 웹사이트를 위한 미니멀하고 반응형이 빠른 끈적한 탐색 모음으로, 멋진 중립 색상, 다크 모드 지원 및 대화형 요소를 제공합니다. 기능 링크와 검색 창으로 중간 정도의 복잡성을 위해 설계되었습니다.
HTML 코드
<header class="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-900 transition-colors duration-300 ease-in-out">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap gap-4">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 whitespace-nowrap tracking-tight transition-colors duration-300 ease-in-out">
Weather<span class="text-blue-600 dark:text-blue-400">Sphere</span>
</a>
<div class="flex items-center gap-4 order-3 md:order-none">
<div class="relative flex items-center">
<input type="search" placeholder="Search city..." class="py-2 pl-10 pr-3 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 ease-in-out w-full max-w-xs md:max-w-none">
<svg class="absolute left-3 text-gray-500 dark:text-gray-400 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<button type="button" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ease-in-out">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12h1m15.325-7.757l-.707-.707M4.343 19.343l-.707-.707m13.414 0l.707-.707M4.343 4.343l-.707-.707"></path>
</svg>
</button>
</div>
<input type="checkbox" id="menu-toggle" class="hidden peer">
<label for="menu-toggle" class="cursor-pointer md:hidden text-gray-600 dark:text-gray-300 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300 ease-in-out order-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</label>
<div class="hidden peer-checked:block md:flex flex-col md:flex-row md:items-center gap-x-6 gap-y-2 w-full md:w-auto mt-4 md:mt-0 pb-2 md:pb-0 border-t md:border-t-0 border-gray-200 dark:border-gray-700 order-last md:order-none transition-all duration-300 ease-in-out" id="navbar-links">
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Dashboard
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Forecast
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Climate Data
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Maps
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
About
</a>
</div>
</nav>
</header>관련 구성 요소
브루탈리즘 끈적끈적한 내비게이션
Tailwind CSS를 사용하여 반응형 동작과 다크 모드를 지원하는 브루탈리스트 스타일의 고정 탐색 구성 요소입니다. 높은 대비, 대담한 타이포그래피, 그리고 뚜렷하고 생생한 미학이 특징입니다.
Sticky Navigation 컴포넌트 - Neumorphism
Neumorphism 디자인, 보색 구성표 및 어두운 테마 지원을 갖춘 반응형 고정 탐색 구성 요소로, 포트폴리오 웹 사이트에 적합합니다. 다크 모드 클래스와 함께 Tailwind CSS를 사용하고 Neumorphism 효과에 대한 미묘한 그림자를 포함합니다.