Composant de menu déroulant
Un composant de menu déroulant réactif pour les interfaces de médias sociaux, avec un thème sombre et une palette de couleurs pastel. Il s’agit d’un composant complexe avec de multiples éléments interactifs, conçu pour réduire la fatigue oculaire.
HTML Code
<div class="dark:bg-gray-900 min-h-screen p-8">
<div class="relative inline-block text-left">
<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" id="options-menu" aria-haspopup="true" aria-expanded="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 dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700" 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-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">
<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>Profile</span>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">
<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>Friends</span>
</div>
</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-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Notifications
<span class="inline-flex items-center justify-center px-2 py-0.5 ml-2 text-xs font-semibold leading-none text-red-100 dark:text-red-800 bg-red-600 dark:bg-red-200 rounded-full">3</span>
</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-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Share Post</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Logout</a>
</div>
</div>
</div>
</div>Composants associés
Composant de menu déroulant
Un composant de menu déroulant réactif conçu pour une utilisation professionnelle, avec des micro-interactions et des couleurs complémentaires. Il prend en charge les thèmes clairs et sombres et utilise Tailwind CSS pour le style.
Composant de menu déroulant
Un composant de menu déroulant réactif conçu avec des micro-interactions, une palette de couleurs analogue et la prise en charge du thème sombre, adapté à un site Web de portfolio.
Menu déroulant du blog rétro
Un menu déroulant rétro-vintage réactif pour le contenu du blog. Dispose d’un schéma de couleurs triadique simple et d’une prise en charge du mode sombre à l’aide de Tailwind CSS. Pas de JavaScript.