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.
Código HTML
<nav class="bg-white dark:bg-gray-800 shadow-lg p-4 rounded-lg flex items-center justify-between"> <div class="flex items-center space-x-4"> <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full"> <span class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</span> </div> <ul class="flex space-x-6"> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Home</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">About</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Portfolio</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Contact</a></li> </ul> <div class="relative"> <button class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200 focus:outline-none"> Menu <span class="inline-flex items-center justify-center w-3 h-3 bg-gray-800 dark:bg-white rounded-full"></span> </button> <ul class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg hidden" id="dropdown-menu"> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Profile</a></li> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Settings</a></li> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Logout</a></li> </ul> </div> <button class="hidden md:block text-gray-800 dark:text-white border border-gray-400 dark:border-gray-600 rounded-lg px-4 py-2 hover:bg-pink-500 dark:hover:bg-pink-400 transition ease-in-out duration-200">Get Started</button></nav>Componentes relacionados
Barra de navegación en modo oscuro
Componente de barra de navegación con efectos responsivos y soporte para temas oscuros.
Barra de navegación de redes sociales
Componente de barra de navegación de redes sociales simple en escala de grises
Componente de la barra de navegación
Un componente de barra de navegación receptivo diseñado en estilo Material Design con un esquema de color triádico, adecuado para interfaces de redes sociales e incluye soporte para temas oscuros.