JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul id='menu'>
    <li><a>Lien 1</a></li>
    <li><a>Lien 1</a></li>
    <li><a>Lien 1</a></li>
    <li><a>Lien 1</a></li>
    <button id='closeMenu'>
      Fermer Menu
    </button>
  </ul>
</div>
<button id='openMenu'>
  Ouvrir Menu
</button>

CSS

#menu {
  display: none;
  border: 1px solid;
}

JavaScript

var openMenuButton = document.getElementById('openMenu');
var closeMenuButton = document.getElementById('closeMenu');
var menu = document.getElementById('menu');

openMenuButton.addEventListener('click', function(e) {
	e.stopPropagation();
	menu.style.display = 'block';
});


closeMenuButton.addEventListener('click', function(e) {
	e.stopPropagation();
	menu.style.display = 'none';
})

document.addEventListener('click', function(e){
	var target = e.target;
  console.log(target)
  if(target.contains(menu) && menu.style.display === 'block') {
  		menu.style.display = 'none';
  }
})