Componente del menú de hamburguesas
Un componente complejo y receptivo del menú de hamburguesas con diseño de cristal, con un efecto translúcido similar al vidrio esmerilado, adecuado para un portafolio que exhibe trabajos o productos. Incluye un soporte de tema oscuro y utiliza Tailwind CSS para el estilo.
Código HTML
<div class="relative flex flex-col items-center bg-gray-800 min-h-screen p-4 dark:bg-gray-900">
<button class="hamburger flex items-center justify-center w-10 h-10 bg-white bg-opacity-30 backdrop-blur-md rounded-full shadow-lg hover:bg-opacity-50 dark:bg-gray-700 dark:hover:bg-opacity-50">
<span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
<span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
<span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
</button>
<nav class="absolute left-0 top-12 w-64 bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg transition-transform duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0 dark:bg-gray-700">
<div class="flex flex-col p-4">
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Home</a>
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">About</a>
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Portfolio</a>
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Contact</a>
</div>
</nav>
<div class="mt-5 w-full flex justify-center">
<img src="https://picsum.photos/200/300" alt="Portfolio Item" class="rounded-lg shadow-lg">
</div>
<div class="mt-5 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white bg-opacity-90 shadow-lg">
<p class="ml-2 text-white">John Doe</p>
</div>
</div>Componentes relacionados
Componente del menú de hamburguesas
Un componente de menú de hamburguesas minimalista y receptivo con un esquema de colores de arco iris degradado, diseñado para plataformas de citas/sociales, con soporte para modo oscuro.
Componente del menú de hamburguesas
Un componente de menú de hamburguesas complejo, receptivo y vibrante con microinteracciones para el comercio electrónico, con una navegación deslizable, enlaces de categoría, una barra de búsqueda e íconos de redes sociales. Es compatible con el modo oscuro y utiliza Lorem Picsum para las imágenes.
Menú de hamburguesas brutalismo
Componente de menú de hamburguesa inspirado en el brutalismo para el tablero con esquema de color análogo, complejidad moderada, diseño receptivo y soporte de tema oscuro con Tailwind CSS. Sin JavaScript.