JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>normal color</p>
    <p class="inv">inverted color</p>
</div>

CSS

div {background-color: #f00; }

.inv {
    overflow: hidden;
}

.inv::after {
    content: '';
    display:block;
    outline: 9in solid invert;
}

:-webkit-any(.inv) {
   background: inherit;
   -webkit-filter: invert();
}
    :-webkit-any(.inv)::after {
        content: none;
    }

:-moz-any(.inv) {
    background: inherit;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter></svg>#invert");
}

    :-moz-any(.inv)::after {
        content: none;
    }