레트로내비
레트로/빈티지 디자인, 생생한 색 구성표 및 최소한의 요소를 갖춘 단순하고 반응이 빠른 다크 모드 호환 탐색 구성 요소로 전자 상거래 웹 사이트에 적합합니다.
HTML 코드
<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="text-white text-2xl font-bold">RetroShop</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-white hover:text-gray-200">Home</a>
<a href="#" class="text-white hover:text-gray-200">Products</a>
<a href="#" class="text-white hover:text-gray-200">About</a>
<a href="#" class="text-white hover:text-gray-200">Contact</a>
</div>
<div class="md:hidden">
<button class="text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</nav>관련 구성 요소
Brutalist E-commerce Navigation 구성 요소
Tailwind CSS를 사용하는 복잡하고 잔인한 전자 상거래 탐색 구성 요소로, 고대비(검정/흰색)의 삼극 색 구성표(노란색, 청록색, 자홍색), CSS 전용 메가 메뉴, CSS 전용 검색 표시, CSS 전용 반응형 모바일 메뉴 및 다크 모드 지원을 특징으로 합니다. HTML 전용, JavaScript 없음.