날씨 애플리케이션을 위한 간단하고 반응이 빠른 사이버펑크 테마 탐색 구성 요소로, 차분한 색상과 네온 액센트가 특징이며 다크 모드를 지원합니다.
<nav class="bg-neutral-900 py-4 dark:bg-black shadow-lg"> <div class="container mx-auto px-4 flex justify-between items-center"> <a href="#" class="text-blue-400 text-2xl font-bold font-mono tracking-widest dark:text-cyan-400 select-none"> <span class="text-blue-500 dark:text-cyan-500">WΞATHЯ</span><span class="text-neutral-500 dark:text-neutral-700">_SYS</span> </a> <div class="hidden md:flex space-x-6"> <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase"> Current <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span> </a> <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase"> Forecast <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span> </a> <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase"> Radar <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span> </a> <a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase"> Settings <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span> </a> </div> <div class="md:hidden"> <button class="text-blue-400 text-2xl focus:outline-none dark:text-cyan-400" aria-label="Toggle navigation"> <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> </button> </div> </div> </nav>
생생한 색상과 미시적 상호작용을 가진 반응형 탐색 구성 요소로, 포트폴리오를 위해 설계되었습니다.
반응형 동작과 어두운 테마를 지원하는 brutalist 탐색 구성 요소입니다.
전자 상거래를 위한 Neumorphism 스타일을 사용한 간단한 반응형 탐색 구성 요소입니다.