<nav class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <div class="flex-shrink-0">
                <a href="#" class="text-2xl font-bold text-indigo-600">Brand</a>
            </div>
            <div class="hidden md:flex space-x-4">
                <a href="#" class="text-gray-800 hover:text-indigo-600">Home</a>
                <a href="#" class="text-gray-800 hover:text-indigo-600">About</a>
                <a href="#" class="text-gray-800 hover:text-indigo-600">Services</a>
                <a href="#" class="text-gray-800 hover:text-indigo-600">Contact</a>
            </div>
            <div class="md:hidden">
                <button id="menu-toggle" class="text-gray-800 hover:text-indigo-600 focus:outline-none">
                    <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 12h16m-7 6h7"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <!-- Mobile Menu -->
    <div id="mobile-menu" class="md:hidden hidden">
        <a href="#" class="block px-4 py-2 text-gray-800 hover:text-indigo-600">Home</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:text-indigo-600">About</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:text-indigo-600">Services</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:text-indigo-600">Contact</a>
    </div>
</nav>

<script>
    // JavaScript for toggling the mobile menu
    document.getElementById('menu-toggle').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
    });
</script>