JSFiddle - React, Tailwind, and code Playground

by logintomyk

HTML

<div class="sprite">
    This is where your sprite is.Removed height: 100%; and done!! :)
</div>

 <div class="content">
        <span>close</span>
     <div class="centered">
          
         
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
           lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
           lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         lorem lipsum
         <br/> 
         
     </div>

 </div>

CSS

.sprite{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 20;
     width: 100%;
    /* height: 100%; */
    background-color: gray;
    opacity: 0.6;
    border:1px solid #FFF;
    text-align:center;
}

.content{
     border:1px solid red; 
     position:relative;
     z-index: 21; /* change this to less than 20 to overlay under sprite on scroll*/
     margin:auto;
     padding:10px;
     width:30%;  
     margin-top:24%;
     text-align:center; 
}

.content span{position:absolute;right:0;top:0;text-align:right; border:1px solid #F00000}

.centered{
        height:100%; 
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}