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.
HTML Code
<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-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700 transition transform hover:scale-105" id="menu-button" aria-expanded="true" aria-haspopup="true">
Options
<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="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
<form method="POST" action="#" role="none">
<button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-3">
Sign out
</button>
</form>
</div>
</div>
</div>Composants associés
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.
Composant de menu déroulant
Un menu déroulant réactif avec prise en charge des micro-interactions et du thème sombre construit avec Tailwind CSS.
Menu déroulant Art Déco
Un composant de menu déroulant simple et réactif avec un style de design Art déco et une palette de couleurs rétro/vintage, adapté aux entreprises manufacturières/industrielles. Inclut la prise en charge du mode sombre.