Barra de navegación de redes sociales skeuomórfica
Barra de navegación de redes sociales skeuomórfica con esquema de color triádico y complejidad moderada.
Código HTML
<nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-lg dark:shadow-[0_20px_50px_rgba(0,_0,_0,_0.6)] p-4 rounded-b-xl">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center space-x-4">
<a href="#" class="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
<svg class="h-8 w-8" 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-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2.343 2.343a1 1 0 01-1.414 0L11.5 11.5m-4 4L7 10m3.75 3.75V17m-5 0h5"></path></svg>
<span class="font-bold text-xl">SocialApp</span>
</a>
</div>
<div class="flex items-center space-x-6">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300 relative">
<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.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path></svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition 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.004 9.004 0 01-7.504-4.588M3.05 5.84C3.05 5.84 6.893 19 12 19s8.95-13.16 8.95-13.16"></path></svg>
</a>
<div class="relative">
<button class="relative z-10 block h-10 w-10 rounded-full overflow-hidden border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-white">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Your avatar">
</button>
</div>
</div>
</div>
</nav>Componentes relacionados
Barra de navegación Skeuomorphic
Un componente de barra de navegación de cartera diseñado con estilos skeuomórficos y una combinación de colores pastel, incluida la compatibilidad con el modo oscuro. Cuenta con elementos interactivos como enlaces y un menú desplegable.
Componente de la barra de navegación
Una barra de navegación responsiva para un tablero, con un tema de modo oscuro con tonos tierra. Incluye un logotipo, enlaces de navegación, una barra de búsqueda y una sección de perfil de usuario. Diseñado para una complejidad moderada con elementos interactivos.
Barra de navegación minimalista
Un componente de barra de navegación receptivo diseñado en un estilo minimalista, compatible con el tema oscuro y que utiliza Tailwind CSS.