Memphis_Vibrant_Marketplace_Dropdown_Menu
마켓플레이스를 위한 복잡하고 반응이 빠른 드롭다운 메뉴 구성 요소로, 생동감 넘치는 멤피스 스타일의 미학으로 디자인되었습니다. 대담한 색상, 기하학적 모양 및 다크 모드 지원이 특징입니다.
HTML 코드
<div class="relative inline-block text-left font-sans">
<div>
<button type="button" class="inline-flex justify-center w-full rounded-full border-4 border-yellow-400 dark:border-yellow-500 shadow-lg px-6 py-3 bg-fuchsia-500 text-lg font-extrabold text-white hover:bg-fuchsia-600 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg lg:text-xl" id="menu-button" aria-expanded="true" aria-haspopup="true">
Categories
<svg class="-mr-1 ml-3 h-6 w-6 text-white" 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>
<!-- Dropdown menu, show/hide based on menu state. -->
<div class="origin-top-right absolute right-0 mt-3 w-72 md:w-80 lg:w-96 rounded-3xl shadow-xl bg-gradient-to-br from-violet-500 to-pink-500 dark:from-violet-700 dark:to-pink-700 ring-4 ring-orange-400 dark:ring-orange-600 ring-offset-4 ring-offset-blue-300 dark:ring-offset-blue-900 focus:outline-none overflow-hidden transform scale-100 opacity-100 transition ease-out duration-300" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-2" role="none">
<!-- Search Bar -->
<div class="px-4 py-2 mb-2">
<input type="text" placeholder="Search categories..." class="w-full p-3 rounded-xl border-2 border-indigo-400 dark:border-indigo-600 bg-white bg-opacity-90 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-300 dark:focus:ring-violet-500 transition duration-200 text-base sm:text-sm md:text-base">
</div>
<!-- Section Header -->
<div class="px-4 py-2 bg-gradient-to-r from-teal-400 to-green-400 dark:from-teal-600 dark:to-green-600 text-white font-bold text-lg uppercase tracking-wide border-b-2 border-dotted border-white/50 dark:border-white/30 text-center rounded-t-xl sm:text-base md:text-lg">
Top Categories
</div>
<!-- Menu Items -->
<a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-0">
<img src="https://picsum.photos/40/40?random=1" alt="Electronics icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
<span class="font-semibold">Electronics</span>
<span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(120k listings)</span>
</a>
<a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-1">
<img src="https://picsum.photos/40/40?random=2" alt="Fashion icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
<span class="font-semibold">Fashion & Apparel</span>
<span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(95k listings)</span>
</a>
<a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-2">
<img src="https://picsum.photos/40/40?random=3" alt="Home icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
<span class="font-semibold">Home & Garden</span>
<span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(78k listings)</span>
</a>
<a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-3">
<img src="https://picsum.photos/40/40?random=4" alt="Art icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
<span class="font-semibold">Art & Collectibles</span>
<span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(55k listings)</span>
</a>
<a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-4">
<img src="https://picsum.photos/40/40?random=5" alt="Sports icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
<span class="font-semibold">Sports & Outdoors</span>
<span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(42k listings)</span>
</a>
<!-- Call to Action -->
<div class="border-t-2 border-dotted border-white/50 dark:border-white/30 pt-4 px-4 pb-2 mt-4 text-center" role="none">
<a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 border-4 border-lime-400 dark:border-lime-500 rounded-full shadow-md font-bold text-lg bg-cyan-400 text-teal-900 hover:bg-cyan-500 hover:text-teal-800 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg">
<svg class="w-6 h-6 mr-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
View All Categories
</a>
</div>
</div>
</div>
</div>