JSFiddle - React, Tailwind, and code Playground

HTML

<img src='https://2.bp.blogspot.com/-K5zzxN8YH14/WuAmAVIZX6I/AAAAAAAAAhs/y03UcNz8gtwlRzXKlCmyfnbnov4d5v7ugCLcBGAs/s1600/increase%2Bfb%2Blikes.png' onclick="document.getElementById('box').style.display='block';
             document.getElementById('bg').style.display='block';
             document.getElementById('pic').src=this.src">
             
             <div id="box" class="box">
    <a href='#' onclick="document.getElementById('box').style.display='none';
                document.getElementById('bg').style.display='none'">X</a>
                <br>
    <img id='pic' src=''>
</div>
<div id="bg" class="bg"></div>

CSS

.bg {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.box {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 3px;
  border: 8px solid #435;
  background-color:white;
  z-index: 1002;
  overflow: auto;
}
.close{
    font-size: 20px;
    text-decoration: wavy;
    position:static;
}
#pic{
  width: 500px;
  height:auto;
}