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

function outside_function(event) {
    var outside = event.target;
    outside.classList.remove("outside");
    var menu_list = document.getElementById("menu-list");
    menu_list.classList.remove("menu-list-open");
    event.stopPropagation();
  }
  var outside = document.getElementById("outside");
  outside.addEventListener("click", outside_function);

  function menu_click_event(event) {
    var menu_list = document.getElementById("menu-list");
    var outside = document.getElementById("outside");
    menu_list.classList.add("menu-list-open");
    outside.classList.add("outside");
    event.stopPropagation();
  }
  var menu = document.getElementById("menu");
  menu.addEventListener("click", menu_click_event);