레트로 전자 상거래 탐색 모음
전자 상거래를 위한 레트로/빈티지 스타일의 그레이스케일 탐색 구성 요소로, 호버 및 드롭다운과 같은 대화형 요소를 통해 중간 정도의 복잡성을 특징으로 합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.
HTML 코드
<nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="text-lg font-bold">RetroShop</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
<div class="relative group">
<button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button>
<div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a>
</div>
</div>
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">
<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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</a>
<button class="md:hidden">
<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>