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 composant de menu déroulant réactif stylisé avec glassmorphism, adapté à un blog ou à la consommation de contenu, avec prise en charge du thème sombre.
Composant de menu déroulant
Un composant de menu déroulant réactif conçu avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Neumorphisme Earth Tone Menu déroulant
Un menu déroulant de style Neumorphisme avec des tons de terre, adapté au commerce électronique. Il est réactif et inclut la prise en charge du thème sombre avec Tailwind CSS. Aucun JavaScript n’est utilisé, seulement des classes d’utilitaires HTML et Tailwind pour le style, y compris les variantes en mode sombre.