3D_Marketplace_Dropdown_Menu
Il s’agit d’un composant de menu déroulant complexe, inspiré de la 3D, conçu pour les plateformes de marché, avec des couleurs neutres chaudes, une navigation à plusieurs niveaux et une réactivité totale avec prise en charge du mode sombre. Il incorpore de la profondeur et de l’engagement à travers des ombres et des transitions subtiles.
HTML Code
<div class="relative inline-block text-left font-sans">
<div>
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-850 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-amber-500 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg active:scale-95" id="menu-button" aria-expanded="true" aria-haspopup="true">
Categories
<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>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-200"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-150"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="absolute right-0 mt-2 w-72 md:w-96 origin-top-right bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-800 rounded-md shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none transform scale-100 opacity-100 transition-all duration-300 ease-in-out z-50" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">
<img src="https://picsum.photos/30/30?random=1" alt="Electronics icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
Electronics
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">
<img src="https://picsum.photos/30/30?random=2" alt="Fashion icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
Fashion & Apparel
<svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">
<img src="https://picsum.photos/30/30?random=3" alt="Home & Garden icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
Home & Garden
</a>
</div>
<div class="py-1" role="none">
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">
<img src="https://picsum.photos/30/30?random=4" alt="Books icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
Books & Media
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">
<img src="https://picsum.photos/30/30?random=5" alt="Sports icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
Sports & Outdoors
</a>
</div>
<div class="py-1" role="none">
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">
<img src="https://picsum.photos/30/30?random=6" alt="Vehicles icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
Vehicles
<svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</div>
<div class="py-1" role="none">
<a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-6">All Categories</a>
<a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-7">Sell on Marketplace</a>
</div>
</div>
</div>Composants associés
Composant de menu déroulant
Composant de menu déroulant avec des micro-interactions, des couleurs vives et une mise en page simple pour un portfolio, avec un design réactif et une prise en charge du thème sombre.
Composant de menu déroulant
Un composant de menu déroulant réactif pour les interfaces financières/bancaires, avec des micro-interactions, des couleurs aux tons de bijou et la prise en charge du mode sombre. Conçu pour l’engagement et la clarté de l’utilisateur.
Composant de menu déroulant
Un composant de menu déroulant inspiré de Material Design adapté à un portfolio, avec des couleurs analogues, une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.