JSFiddle - React, Tailwind, and code Playground

HTML

<div class="root">
  <div class="bg"></div>
  <div class="requiredParent1">
    <div class="requiredParent2">
      <div class="mix">
      </div>
      <div class="mixBorder">
      </div>
    </div>
  </div>

CSS

.bg,
.root,
.requiredParent1,
.requiredParent2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}


.requiredParent1 {
     transform: translate3d(0px, 2px, 0px);
   
}

.bg {
  background-color: red;

}


.mix,
.mixBorder {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25%;
  height: 25%;

}

.mix {
  background-color: white;

  mix-blend-mode: difference;

}

.mixBorder {
  outline: white solid thick;
}