• HTML
• JS

HTML

<nav class="flex justify-between flex-wrap items-center bg-red-500 p-4 text-white"> 
    <div class="mr-4">
        <a href="#">
            <span class="font-semibold text-xl">Auto Web</span>
        </a>
    </div>
    <div class="sm:hidden shadow-lg rounded border border-red-400 px-4 py-1 cursor-pointer" id="boton">
        <a>&#9776;</a>
    </div>
    <div class="w-full sm:flex sm:w-auto sm:flex-grow hidden" id="menu">
        <div class="text-sm sm:flex sm:flex-grow items-center" >
            <a href="" class="block text-red-200 hover:text-white my-2 sm:m-0 sm:mr-2">Elige</a>
            <a href="" class="block text-red-200 hover:text-white my-2 sm:m-0 sm:mr-2">Comprar</a>
            <a href="" class="block text-red-200 hover:text-white my-2 sm:m-0 sm:mr-2">Contactar</a>
        </div>
        
        <div class="">
            <a href="#" class="inline-block px-4 py-1 text-sm border rounded border-white hover:bg-red-600">Suscribirse</a>
        </div>
    </div>
</nav>

JS

var boton = document.querySelector('#boton');
var menu  = document.querySelector('#menu');
 

boton.addEventListener('click',function(){
    menu.classList.toggle('hidden');
});