JSFiddle - React, Tailwind, and code Playground
HTML
<button id="open">Open</button>
<div id="test">Lorem ipsum</div>
CSS
body { padding: 1em; }
#test {
width: 200px;
height: 200px;
background: gray;
margin: 1em;
}
JavaScript
var button = $('#open')[0]
var el = $('#test')[0]
$(button).on('click', function(e) {
$(el).show()
e.stopPropagation()
})
$(document).on('click', function(e) {
if ($(e.target).closest(el).length === 0) {
$(elem).hide()
}
})
$(document).on('keydown', function(e) {
if (e.keyCode === 27) {
$(el).hide()
}
})