HTML 코드
<nav class="bg-stone-100 dark:bg-stone-800 shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<!-- Website Logo -->
<a href="#" class="flex items-center py-4 px-2">
<span class="text-stone-500 dark:text-white text-lg font-semibold">Your Logo</span>
</a>
</div>
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Home</a>
<a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Services</a>
<a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">About</a>
<a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Contact Us</a>
</div>
</div>
<!-- Secondary Navbar items -->
<div class="hidden md:flex items-center space-x-3 ">
<a href="" class="py-2 px-2 font-medium text-stone-500 dark:text-white rounded hover:bg-green-500 hover:text-white transition duration-300">Log In</a>
<a href="" class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300">Sign Up</a>
</div>
<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="!showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="hidden mobile-menu">
<ul class="">
<li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Home</a></li>
<li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Services</a></li>
<li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">About</a></li>
<li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Contact Us</a></li>
</ul>
</div>
</nav>