JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" id="start">Button</a>
<div id="box"></div>
CSS
a {
color: #555;
text-decoration: none;
}
#box { display: none; }
JavaScript
(function() {
var box = $('#box');
$(document).on('click', function() {
if (box.css('display') == 'block') {
box.css('display', 'none');
}
});
$('#start').on('click', function(e) {
box.css({
'text': 'Box',
'position': 'absolute',
'top': '50px',
'left': '0',
'background': '#EEE',
'border': '1px solid #555',
'width': '200px',
'height': '50px',
'display': 'block'
});
e.stopPropagation();
});
box.on('click', function(e) {
e.stopPropagation();
});
})();