JobBoardNavigation
Un composant de navigation simple et réactif pour un site d’offres d’emploi ou une plateforme de développement de carrière, avec des tons océan/bleu, des micro-interactions au survol et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Navigation neumorphe sur les réseaux sociaux
Un composant de navigation simple et réactif sur les réseaux sociaux avec une conception neumorphique d’interface utilisateur douce. Il utilise une palette de couleurs monochromatique et prend en charge le mode sombre.
Navigation skeuomorphe
Un composant de navigation simple et réactif avec un design skeuomorphique, une palette de couleurs analogue adaptée aux applications de médias sociaux, avec prise en charge du thème sombre.
Composant Composants de navigation
Un composant de navigation réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend un logo, des liens de navigation et un bouton d’appel à l’action.