JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sample">
    some text here
</div>

CSS

.sample
{
     filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="0" /><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0" /><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1 0 0 0 0 0 1.01 0 0 0 0 0 1 0 0 0 0 0 1 0" /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncA type="table" tableValues="0 1" /></feComponentTransfer><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.8192771084337349" /><feFuncG type="linear" slope="0.8192771084337349" /><feFuncB type="linear" slope="0.8192771084337349" /></feComponentTransfer><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" intercept="0" /><feFuncG type="linear" slope="1" intercept="0" /><feFuncB type="linear" slope="1" intercept="0" /></feComponentTransfer><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="208.19277108433735" /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0 1" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: grayscale(0) blur(0px) sepia(1) saturate(1) opacity(1) brightness(0.8192771084337349) contrast(1) hue-rotate(208.19277108433735deg) invert(0);
          filter: grayscale(0) blur(0px) sepia(1) saturate(1) opacity(1) brightness(0.8192771084337349) contrast(1) hue-rotate(208.19277108433735deg) invert(0)
}