JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
</div>
hello

CSS

.container {

  position: absolute;
  width: 200px;
  height: 200px;
  
  isolation: isolate;
  
  --e: 0.1;

}

.container > div {
   mix-blend-mode: plus-lighter;
}

.a {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  opacity: var(--e);
 
  
}

.b {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  opacity: calc(1.0 - var(--e));
 

}