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.
Código HTML
<nav class="bg-sky-500 shadow-lg dark:bg-sky-900 py-4">
<div class="container mx-auto px-4 flex justify-between items-center">
<a href="#" class="text-white text-2xl font-bold tracking-tight transform hover:scale-105 transition-transform duration-300 ease-in-out">
JobFind
</a>
<div class="hidden md:flex space-x-6">
<a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
Find Jobs
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
</a>
<a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
Post a Job
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
</a>
<a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
Resume Builder
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
</a>
<a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
Career Advice
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
</a>
</div>
<div class="md:hidden">
<button aria-label="Toggle navigation" class="text-white focus:outline-none focus:ring-2 focus:ring-white rounded">
<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="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</nav>Componentes relacionados
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.
Componente de navegación Brutalismo
Un componente de navegación responsivo diseñado en un estilo brutalista, que muestra un esquema de color monocromático, ideal para un sitio web de portafolio. Las características incluyen un diseño audaz con alto contraste, compatibilidad con el modo oscuro con Tailwind CSS y elementos interactivos como menús desplegables o enlaces de botones.
Componente de componentes de navegación
Un componente de navegación con un tema oscuro, diseño responsivo y sin JavaScript.