JSFiddle - React, Tailwind, and code Playground

HTML

<div id="whitebg"></div>
<div id="blackbg"></div>
<div id="makered"></div>
<span>test</span>

CSS

div {
        position:absolute;
        height:200px
    }

    #whitebg { 
        background: white; 
        width:400px; 
        z-index:1;

    }

    #blackbg { 
        background: black; 
        width:100px; 
        z-index:2;
    }
    span {
        position:absolute; 
        font-family: Arial, Helvetica; 
        font-size: 100px; 
        mix-blend-mode: difference;
        color: white;
        z-index: 3;
    }
    #makered { 
        background-color: red;
        mix-blend-mode: screen;
        width:400px; 
        z-index:4;
    }