<nav class="bg-white shadow-sm px-4 py-3 relative">
<div class="max-w-6xl mx-auto flex items-center justify-between">
<div class="flex items-center">
<a href="#" class="text-xl font-semibold text-gray-800">
Brand Name
</a>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-4">
<a href="#" class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">Home</a>
<a href="#" class="px-3 py-2 text-blue-600 font-medium">Features</a>
<a href="#" class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">Pricing</a>
<a href="#" class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">About</a>
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Sign Up</a>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="mobile-menu-button" class="p-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu, hidden by default -->
<div id="mobile-menu" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="block px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">Home</a>
<a href="#" class="block px-3 py-2 text-blue-600 font-medium rounded-md bg-blue-50">Features</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">Pricing</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">About</a>
<a href="#" class="block px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Sign Up</a>
</div>
</div>
</nav>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
</script>