Menu déroulant Luxe pour la finance
Un composant de menu déroulant élégant et réactif conçu pour les interfaces financières et bancaires, avec une palette de couleurs noir et blanc avec un accent subtil, une prise en charge du mode sombre et une typographie sophistiquée. Compatible avec les ordinateurs de bureau, les tablettes et les appareils mobiles.
HTML Code
<div class="relative inline-block text-left font-serif">
<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-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 transition duration-150 ease-in-out" id="options-menu" aria-haspopup="true" aria-expanded="true">
Accounts & Services
<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 panel, show/hide based on dropdown state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700 focus:outline-none z-10 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
<i class="fas fa-credit-card mr-2 text-gray-500 dark:text-gray-400"></i> Checking Accounts
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
<i class="fas fa-piggy-bank mr-2 text-gray-500 dark:text-gray-400"></i> Savings Accounts
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
<i class="fas fa-hand-holding-usd mr-2 text-gray-500 dark:text-gray-400"></i> Loans & Credit
</a>
</div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
<i class="fas fa-chart-line mr-2 text-gray-500 dark:text-gray-400"></i> Investments
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
<i class="fas fa-wallet mr-2 text-gray-500 dark:text-gray-400"></i> Online Banking
</a>
</div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
<i class="fas fa-headset mr-2 text-gray-500 dark:text-gray-400"></i> Customer Support
</a>
</div>
</div>
</div>
<!-- To make the dropdown interactive, you would typically use a small amount of JavaScript.
For example, a simple toggle on button click to add/remove 'hidden' class from the dropdown panel.
Since the prompt strictly forbids JavaScript, this example shows the structure
and styling for both states (button and dropdown content) as per Tailwind CSS usage. -->
<!-- To simulate interactivity for demonstration, you can manually remove 'hidden' class from the dropdown panel div.
Example: <div class="origin-top-right absolute right-0 [...] z-10" role="menu" ...> -->Composants associés
Composant de menu déroulant
Composant de menu déroulant pour le commerce électronique avec Material Design, schéma de couleurs analogue et interactions complexes à l’aide de Tailwind CSS. Il est réactif et prend en charge le thème sombre sans JavaScript.
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.
Menu déroulant neumorphique (niveaux de gris)
Menu déroulant Neumorphique avec couleurs en niveaux de gris. Mise en page simple pour une utilisation en portefeuille, réactive avec prise en charge du mode sombre. Pas de JavaScript.