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.
Código HTML
<nav class="bg-gray-100 dark:bg-gray-800 shadow-md p-4 sticky top-0 z-50 transition-colors duration-300">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
<!-- Logo/Brand -->
<div class="flex-shrink-0">
<a href="#" class="text-xl font-bold text-gray-800 dark:text-gray-200 tracking-wide hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-300">
SocialSphere
</a>
</div>
<!-- Search Bar (Desktop/Tablet) -->
<div class="hidden md:block flex-grow max-w-lg mx-4">
<div class="relative">
<input type="text" placeholder="Search..." class="w-full px-4 py-2 pl-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-300">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</div>
<!-- Navigation Links -->
<div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
<svg class="h-6 w-6 mr-1" 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="M3 12l2-2m0 0l7-7m-7 7v10a1 1 0 001 1h4m-4-10h10a1 1 0 011 1v10a1 1 0 01-1 1h-4m-6-6v6m6-3v3"></path></svg>
<span>Home</span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
<svg class="h-6 w-6 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>Messages</span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
<svg class="h-6 w-6 mr-1" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
<span>Notifications</span>
</a>
</div>
<!-- Avatar/Profile (Desktop/Tablet) -->
<div class="hidden md:block flex-shrink-0 ml-4">
<a href="#" class="block relative">
<img class="h-10 w-10 rounded-full border-2 border-gray-400 dark:border-gray-500 object-cover hover:ring-2 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-300" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500"></span>
</a>
</div>
</div>
<!-- Mobile Search Bar -->
<div class="md:hidden mt-4">
<div class="relative">
<input type="text" placeholder="Search..." class="w-full px-4 py-2 pl-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-300">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</div>
<!-- Mobile Bottom Navigation (Fixed) -->
<div class="fixed bottom-0 left-0 right-0 bg-gray-100 dark:bg-gray-800 shadow-lg md:hidden p-3 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300 z-40">
<div class="flex justify-around items-center w-full">
<a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
<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="M3 12l2-2m0 0l7-7m-7 7v10a1 1 0 001 1h4m-4-10h10a1 1 0 011 1v10a1 1 0 01-1 1h-4m-6-6v6m6-3v3"></path></svg>
<span class="text-xs mt-1">Home</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
<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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span class="text-xs mt-1">Chats</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
<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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
<span class="text-xs mt-1">Alerts</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300 relative">
<img class="h-6 w-6 rounded-full border border-gray-400 dark:border-gray-500 object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<span class="absolute top-0 right-0 block h-2 w-2 rounded-full ring-1 ring-white dark:ring-gray-800 bg-green-500 -translate-y-1 translate-x-1"></span>
<span class="text-xs mt-1">Profile</span>
</a>
</div>
</div>
</nav>Componentes relacionados
JobBoardNavigation
Un componente de navegación simple y receptivo para una bolsa de trabajo o una plataforma de desarrollo profesional, con tonos océano/azul, microinteracciones al pasar el cursor y compatibilidad con el modo oscuro.
Componentes de navegación
Un componente de navegación minimalista para un sitio web de comercio electrónico, con un logotipo, una barra de búsqueda, enlaces de navegación, un icono de carrito de compras y un avatar de usuario que utiliza Tailwind CSS. Este componente es compatible con el diseño responsivo y el modo oscuro.
Navegación neumórfica de redes sociales
Un componente de navegación de redes sociales simple y receptivo con un diseño neumórfico de interfaz de usuario suave. Utiliza un esquema de color monocromático y admite el modo oscuro.