JobBoardNavigation
A simple, responsive navigation component for a job board or career development platform, featuring ocean/blue tones, microinteractions on hover, and dark mode support.
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>Related Components
Navigation Component
A responsive navigation component designed with Microinteractions and featuring engaging animations based on user actions, supporting both light and dark themes. The component includes profile avatar, navigation links, and hover effects.
Neumorphism Navigation
A simple responsive navigation component with Neumorphism style for e-commerce.
Navigation Components Component
A responsive navigation component with dark mode support using Tailwind CSS. It includes a logo, navigation links, and a call-to-action button.