JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content">This is content!</div>
<div class="tips">
<div class="bg"></div>
<br />
<a href="">This is a tip!</a>
</div>
CSS
.content {
width: 900px;
height: 900px;
background: orange;
}
.tips {
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
left: 0;
top: 0;
}
.bg{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
left: 0;
top: 0;
background: #000;
opacity: 0.5
}
.tips a {
color: #fff;
}
JavaScript
$(".tips").click(function(){
$(".tips").fadeOut(500);
return false;
});