Skeuomorfismo Redes Sociales Mega Menú
Mega Componente de menú con diseño de Skeuomorphism, esquema de color triádico y complejidad simple para fines de redes sociales. Responsivo con soporte para temas oscuros.
Código HTML
<nav class="bg-gray-200 dark:bg-gray-800 shadow-lg">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div class="text-gray-800 dark:text-white text-xl font-bold">SocialHub</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Feed</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-300">Profile</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300">Messages</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300">Notifications</a>
</div>
<div class="md:hidden">
<button class="text-gray-700 dark:text-gray-300 focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
</div>
</div>
</nav>Componentes relacionados
Componente Mega Menú
Un componente de mega menú receptivo diseñado en una interfaz de usuario de modo oscuro con un esquema de color en escala de grises para interfaces de redes sociales.
Componente Mega Menú
Un mega menú receptivo de estilo corporativo para plataformas educativas, con múltiples categorías, cursos recientes y enlaces de recursos. Incluye soporte para el modo oscuro y un diseño limpio y confiable con un color de acento.
Mega Menú Brutalista
Un mega componente de menú receptivo con un diseño brutalista, con tonos tierra y soporte de modo oscuro para un blog o sitio web basado en contenido.