JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Universe">
  <button id='startbutton'>Open Box</button>
  <div id="MainContainer" tabindex="-1">
    <div id="CheckboxContainer">
      <label>
        <input type="checkbox" id="myRegion" />
      </label>
      <label>
        <input type="checkbox" id="myCountry" />
      </label>
    </div>"
  </div>
</div>

CSS

#MainContainer {
  width: 200px;
  height: 200px;
  background: green;
  color: #FFFFFF;
  display: none;
  position: absolute;
  left: -30px;
}

#CheckboxContainer {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  left: 60px;
  margin-top: 50px;
}

JavaScript

$(function() {

  $("#startbutton").click(function(e) {

    if ($('#MainContainer').is(":visible")) {
      $('#MainContainer').fadeOut(200);}
      else {
      e.preventDefault();
      $("#MainContainer").fadeIn(200, function() {
        $(this).focus();
      });
    }
  });

  $("#MainContainer").on('blur', function() {
    $(this).fadeOut(200);
  });
});