JSFiddle - React, Tailwind, and code Playground
by Dedi Wibisono
HTML
<input type="button" value="click" id="click">
<div class="wrapper" id="hello">
<div class="content">
hello world
</div>
</div>
CSS
.wrapper{
display:none;
position:fixed;
right:0;
left:0;
top:0;
bottom:0;
background:rgba(0,0,0,0.5)
}
.content{
background:tomato;
color:white;
padding: 10px 20px;
margin:0 auto;
text-align:center;
width:100px;
}
JavaScript
$("#click").click(function(){
$("#hello").fadeIn();
})
$("#hello").focusout(function(){
$(this).fadeOut();
})