JSFiddle - React, Tailwind, and code Playground

HTML

<div id="abc" class="abc">
    <font color="red">This should be a normal text.</font>
</div>
<font color="red">This should be an affected text.</font>

CSS

html|*:not(.abc) {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}