JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="wrap">
  <div class="grid">
    <div class="a"></div>
    <div class="b"></div>
  </div>
</div>

CSS

.wrap{
  height: 100vh;
  background: lightcoral;
}
.grid {
  position: relative;
 
  width: 400px;
  height: 400px;
  isolation: auto;
 
}

.a {
  
  position: absolute;
  
  height: 100%;
  width: 50%;
  background: red;
  color: white;
  mix-blend-mode: normal;
}

.b {
  position: absolute;
  height: 50%;
  width: 100%;
  background: blue;
  color: white;
  mix-blend-mode: normal;
  
}