JSFiddle - React, Tailwind, and code Playground

HTML

<div id='infobutton'>Click Me</div>
<div id='bg'></div>
<div id='infobox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>
<div class='displaybox'></div>

CSS

#infobox {
    position:absolute; 
    width:100px; 
    height:150px; 
    top:100px;
    left:50%; 
    z-index:2; 
    margin-left:-50px; 
    display:none; border:1px solid black; background-color:#FFFFFF;
}
#bg {
    position:absolute; 
    background-color:#000000; opacity:0.4;  
    filter:alpha(opacity=40); 
    top:0; left:0; width:100%; display:none; min-height:100%; z-index:1;
}

.displaybox {
display:block; border:1px solid black; background-color:green; width:200px; height:200px;
}
#infobutton {
border:1px solid black; width:100px; padding:5px; display:block; cursor:pointer;
}