JSFiddle - React, Tailwind, and code Playground

by collabcoders

HTML

<div id="bg"></div>
<div id="bgmask"></div>
<div id="content">
     
     asdf asdf asdf asdf asdf asdf asdf
     asdf asdf asdf asdf asdf asdf asdf
     asdf asdf asdf asdf asdf asdf asdf 
     asdf asdf asdf asdf asdf asdf asdf 
     asdf asdf asdf asdf asdf asdf asdf
     asdf asdf asdf asdf asdf asdf asdf 
     asdf asdf asdf asdf asdf asdf asdf 
    
</div>

CSS

#bg {
    width:70px;
    height:70px;
    position: absolute;
    right:10%;
    top: 0;
    z-index: -1;
    background:#ccc;
}
#bgmask{
    width:70px;
    height:70px;
    position: absolute;
    right:10%;
    top: 0;
    z-index:999;
    cursor:pointer;
}
#content {
    width:90%;
    padding:5px;
    position:abosolute;
    top:0;
    left:0;
    z-index: 1;
}

JavaScript

$(document).ready(function () {
    $('#bgmask').click(function () {
        alert('background clicked');
    });
});