JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg-red">
  <div class="blend">
    <h2>This text should be blended <span class="isolate">(This one shouldn't)</span>
    </h2>
  </div>
</div>

CSS

.bg-red{
  background:red;
}

.blend{
  
      mix-blend-mode: difference;
      color:white;
}

.isolate{
  isolation: isolate;
}