JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
  </head>

  <body>
    <div id="outside"></div>
    <div id="menu" class="menu">
      <div id="menu-list" class="menu-list">
        a
      </div>
    </div>
  </body>
</html>

CSS

.menu {
  /* If you comment the next line, it renders the way I expect */
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #0000ff80;
}

.outside {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.menu-list {
  display: none;
}

.menu-list-open {
  display: block;
  /* If you comment the next line, it renders the way I expect */
  /* In fact if you decrease the alpha value to 0 it works as well (#ffffff00) */
  background-color: #ffffffc0;
}

JavaScript

const menu_list = document.getElementById("menu-list");
const outside = document.getElementById("outside");
function toggle(event) {
  console.log("%o", event);
  menu_list.classList.toggle("menu-list-open");
  outside.classList.toggle("outside");
  event.stopPropagation();
  //event.preventDefault();
}
function mouse_event(event) {
	console.log("%o", event);
  event.stopPropagation();
  //event.preventDefault();
}

outside.addEventListener("click", toggle);
const menu = document.getElementById("menu");
menu.addEventListener("click", toggle);
outside.addEventListener("mouseup", mouse_event);
menu.addEventListener("mouseup", mouse_event);
menu_list.addEventListener("mouseup", mouse_event);
outside.addEventListener("mousedown", mouse_event);
menu.addEventListener("mousedown", mouse_event);
menu_list.addEventListener("mousedown", mouse_event);