JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div>

<div id="menucontainer">
asdf
<button>
asdf
</button>
</div>

a öskdfj alkösjdf lasjdflk kj lasjdflkjsd
f asdfkasdkf
üasdfasdfüpak
<p>
ask djfalskdj flkasj df
<button>
 kasjd kajsdf 
</button>
</p>

<span> ksadfk asjdflk</span>
<fieldset>

<legend>
asdfasdf 
</legend>

a sdfasdf as
<table>
<tr><td>asdf</td></tr>
</table>
</fieldset>
</div>

CSS

#menucontainer {
  background: red;
  padding: 50px;
  position: absolute;
  top: 50px;
  left: 25px;
  z-index: 1;
}

p {
  z-index: 101;
  position: absolute;
  left: 30px;
  top: 50px;
}

JavaScript

$(window).click(function() {
 $('#menucontainer').hide();
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});