레트로/빈티지 드롭다운 메뉴
레트로/빈티지 미학으로 전자 상거래를 위해 설계된 복잡한 드롭다운 메뉴 구성 요소로, 단색 색상, 풍부한 인터페이스, 다크 모드 지원을 포함한 반응형 디자인을 특징으로 합니다.
HTML 코드
<div class="relative inline-block text-left">
<div>
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-gray-800 text-sm font-medium text-gray-200 hover:bg-gray-700 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" aria-haspopup="true" aria-expanded="true" aria-controls="headlessui-menu-items-117">
Dropdown
<!-- Heroicon name: mini/chevron-down -->
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
<div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 dark:bg-gray-900" role="menu" aria-orientation="vertical" aria-labelledby="headlessui-menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="text-gray-200 block px-4 py-2 text-sm hover:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" role="menuitem">Option 1</a>
<a href="#" class="text-gray-200 block px-4 py-2 text-sm hover:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" role="menuitem">Option 2</a>
<a href="#" class="text-gray-200 block px-4 py-2 text-sm hover:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" role="menuitem">Option 3</a>
<div class="border-t border-gray-600"></div>
<a href="#" class="text-gray-200 block px-4 py-2 text-sm hover:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" role="menuitem">Option 4</a>
<div class="flex items-center justify-between px-4 py-2">
<span class="text-gray-200 text-sm">Profile</span>
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
</div>
</div>
</div>
<div class="p-4">
<h2 class="text-white text-lg font-semibold">Featured Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-4">
<div class="bg-gray-700 rounded-lg p-4">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Product 1">
<h3 class="text-gray-200 mt-2">Product 1</h3>
<span class="text-gray-400">$29.99</span>
</div>
<div class="bg-gray-700 rounded-lg p-4">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Product 2">
<h3 class="text-gray-200 mt-2">Product 2</h3>
<span class="text-gray-400">$39.99</span>
</div>
<div class="bg-gray-700 rounded-lg p-4">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Product 3">
<h3 class="text-gray-200 mt-2">Product 3</h3>
<span class="text-gray-400">$49.99</span>
</div>
</div>
</div>