Basic nav with mobile intergration using tailwind

index.html

    <nav class="bg-gray-100">
        <div class="max-w-7xl mx-auto px-2">
            <div class="flex justify-between">
                <div class="flex space-x-4">
                    <!-- logo -->
                    <div>
                        <a href="#" class="flex items=center py-5 px-2 hover:text-blue-900 text-blue-500">
                            Wout
                        </a>
                    </div>
                    <!-- primary div maybe for future! -->                   
                </div>
                <!-- secondary nav -->
                <div class="hidden md:flex flex items-center space-x-1">
                    <a href="" class="py-5 px-3 text-gray-700 hover:text-gray-900">About</a>
                    <a href="" class="py-5 px-3 text-gray-700 hover:text-gray-900">Work</a>
                    <a href="" class="py-5 px-3 text-gray-700 hover:text-gray-900">Contact</a>
                </div>

                <!-- Mobile button here -->
                <div class="md:hidden flex items-center">
                    <button class="mobile-menu-button">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    <!-- mobile menu goes here -->
    <div class="mobile-menu hidden">
       <a href="" class="block py-4 px-4 text-sm hover:bg-gray-200">About</a>
       <a href="" class="block py-4 px-4 text-sm hover:bg-gray-200">Work</a>
       <a href="" class="block py-4 px-4 text-sm hover:bg-gray-200">Contact</a>
    </div>

    </nav>

main.js

const btn = document.querySelector('.mobile-menu-button');
const menu = document.querySelector('.mobile-menu');


btn.addEventListener('click', () => {
    menu.classList.toggle("hidden");
});