How can I use javascript to hide by default the navigation links in my navbar on small screens?

I set up my navbar using tailwind css and was able to make it responsive. When viewed on a smaller screen the navigation links are displayed underneath each other in a flex block kind of way. However when viewed in a mobile viewport the navigation links are showing by default. Implemented a button that can be clicked to show and hide it but how can I use javascript to actually write the code for that to work?

Here is a snippet of my code:

<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
    <nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
      <div class="flex items-center flex-shrink-0 text-green-600 mr-6">
        <img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
        <span class="font-bold text-2xl tracking-tight">First Last</span>
      </div>
      <div class="block md:hidden">
        <button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      <div class="w-full block md:flex md:items-center md:w-auto">
        <div class="text-sm md:flex-grow">
          <a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a>
          <a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a>
          <a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a>
          <a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a>
        </div>
      </div>
    </nav>

Image of Navbar seen from the mobile view

Solution

Change block md:flex to hidden md:flex which will hide the menu on mobile screens.
You can then use Element.classList.toggle to toggle the hidden class when the button is clicked on mobile screens.

Try this

document.addEventListener('DOMContentLoaded', function(){
    let menu = document.getElementById('navbar-menu');

    document.getElementById('navbar-toggler').addEventListener('click', event => {
        menu.classList.toggle('hidden')
    })
})

<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
    <div class="flex items-center flex-shrink-0 text-green-600 mr-6">
        <img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
        <span class="font-bold text-2xl tracking-tight">First Last</span>
    </div>
    <div class="block md:hidden">
        <button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300" id="navbar-toggler">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
    </div>
    <div class="w-full hidden md:flex md:items-center md:w-auto" id="navbar-menu">
        <div class="text-sm md:flex-grow">
            <a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a>
            <a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a>
            <a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a>
            <a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a>
        </div>
    </div>
</nav>