JSFiddle - React, Tailwind, and code Playground

by Andrew Holloway

HTML

<div style="background-color: black">


<div class="box"></div> 
<div class="head">AWESOME TEST</div>
</div>

CSS

.head {
  position: absolute;
  top: 50%;
  left: 33%;
  transform: translate(-16%, -50%);
  z-index: 99;
  font-size:50px;
  font-weight:bold;
    mix-blend-mode: color;
  
    
}
.box {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 20%;
   height: 57%;
   transform: translate(-50%, -50%);
   z-index: 9; 
  background: #FF0000;
  

}