Componente de navegación de redes sociales
Un componente de navegación simple y receptivo para aplicaciones de redes sociales, con un tema oscuro y un esquema de color complementario inspirado en Material Design. Incluye un logotipo, enlaces de navegación y un avatar de usuario.
Código HTML
<nav class="bg-blue-500 dark:bg-blue-900 p-4 shadow-md">
<div class="container mx-auto flex items-center justify-between">
<!-- Logo -->
<a href="#" class="text-white text-2xl font-bold">SocialLink</a>
<!-- Navigation Links -->
<div class="hidden md:flex space-x-6">
<a href="#" class="text-white hover:text-yellow-200 transition duration-300">Home</a>
<a href="#" class="text-white hover:text-yellow-200 transition duration-300">Notifications</a>
<a href="#" class="text-white hover:text-yellow-200 transition duration-300">Messages</a>
<a href="#" class="text-white hover:text-yellow-200 transition duration-300">Profile</a>
</div>
<!-- User Avatar -->
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
<!-- Mobile Menu Button (Hamburger) -->
<button class="md:hidden text-white focus:outline-none">
<svg class="w-6 h-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 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Navigation (Hidden by default) -->
<div class="md:hidden mt-4 space-y-2">
<a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Home</a>
<a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Notifications</a>
<a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Messages</a>
<a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Profile</a>
</div>
</nav>Componentes relacionados
Componente de navegación
Un componente de navegación responsivo diseñado con microinteracciones y con animaciones atractivas basadas en las acciones del usuario, que admite temas claros y oscuros. El componente incluye avatar de perfil, enlaces de navegación y efectos de desplazamiento.
Navegación de redes sociales
Un componente de navegación de redes sociales receptivo con un esquema de color apagado/desaturado, inspirado en los principios de Material Design, que admite modos claro y oscuro. Cuenta con un diseño basado en cuadrículas y efectos de profundidad.
Navegación de redes sociales
Un componente de navegación de redes sociales limpio y minimalista con una paleta verde bosque, diseñado para diseños responsivos y modo oscuro. Cuenta con una navegación principal, un perfil de usuario y una búsqueda.