JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay">
    
</div>
<div class="fixed">
    <center>
        
        <h3>
            Only this thing should be brought on top of overlay.. 
        </h3>
    </center>
    
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

.fixed{
    position: fixed;
    width: 100%;
    height: 60px;
    top:0;
    left: 0;
    background: #f4f4f4;
   
}
.fixed h3{
    position:relative;
    z-index: 300;
    color: #fff;
}

.overlay{
      position: absolute;
  z-index: 1;
  background-color: #000;
    top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
opacity: .5;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}