Brutalisme Menu déroulant
Un composant de menu déroulant de style brutaliste en niveaux de gris, adapté aux sites Web d’entreprise. Dispose d’une interface complexe et multi-éléments avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
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-offset-gray-100 focus:ring-black dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700" 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" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
<a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-0">
<div class="flex items-center">
<img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
<span>Account Settings</span>
</div>
</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-1">
<div class="flex items-center">
<img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
<span>Support</span>
</div>
</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 dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-2">
<div class="flex items-center">
<svg class="h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
</svg>
<span>Sign out</span>
</div>
</button>
</form>
</div>
</div>
</div>Composants associés
Composant de menu déroulant
Un menu déroulant réactif avec un design Glassmorphism utilisant Tailwind CSS, prenant en charge le mode sombre et présentant des effets d’arrière-plan flous.
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.
Composant de menu déroulant 3D
Un composant de menu déroulant réactif avec une palette de couleurs vives, conçu pour la présentation de portfolio. Il présente un design 3D avec des éléments interactifs, adapté au mode sombre.