Barra de navegación de redes sociales
Componente de barra de navegación de redes sociales simple en escala de grises
Código HTML
<nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="text-gray-800 dark:text-white text-xl font-bold">SocialApp</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Feed</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Profile</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Messages</a>
</div>
</div>
</nav>Componentes relacionados
Barra de navegación Skeuomorphic
Una barra de navegación responsiva simple para redes sociales con un estilo de diseño esqueuomórfico, que utiliza un esquema de color análogo y admite el modo oscuro.
Transiciones de degradado/color Barra de navegación del panel de control en escala de grises
Una barra de navegación compleja y receptiva para un tablero, con transiciones de degradado en un esquema de color en escala de grises. Incluye múltiples elementos interactivos y soporte completo para el modo oscuro.
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.