Componente de menú desplegable 3D
Un componente de menú desplegable responsivo con una combinación de colores vibrantes, diseñado para la exhibición de portafolios. Cuenta con un diseño 3D con elementos interactivos, apto para el modo oscuro.
Código HTML
<div class="relative inline-block text-left">
<div>
<button type="button" class="inline-flex justify-between items-center w-full rounded-lg border border-transparent shadow-lg px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gradient-to-r from-blue-700 to-purple-700" id="menu-button" aria-expanded="true" aria-haspopup="true">
Menu
<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.23 7.21a.75.75 0 011.06 0L10 10.47l3.71-3.26a.75.75 0 111.04 1.14l-4.25 3.67a.75.75 0 01-1.04 0l-4.25-3.67a.75.75 0 010-1.14z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<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" role="menuitem">Portfolio Item 1</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" role="menuitem">Portfolio Item 2</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" role="menuitem">Portfolio Item 3</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" role="menuitem">Portfolio Item 4</a>
</div>
</div>
</div>
Componentes relacionados
Componente de menú desplegable
Un componente de menú desplegable receptivo diseñado para uso comercial/corporativo, con microinteracciones y colores complementarios. Es compatible con temas claros y oscuros y utiliza Tailwind CSS para el estilo.
Componente de menú desplegable
Un componente de menú desplegable diseñado con el estilo Glassmorphism, con efectos responsivos y soporte para temas oscuros usando Tailwind CSS.
Menú desplegable de Glassmorphism
Un menú desplegable simple y responsivo con un diseño de glassmorphism, que utiliza tonos morados/violetas, adecuado para aplicaciones de tecnología/SaaS. Soporta el modo oscuro.