JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
      <filter id="linear">
      <feComponentTransfer>
        <feFuncR type="linear" slope="-1" intercept="1" />
        <feFuncG type="linear" slope="-1" intercept="1" />
        <feFuncB type="linear" slope="-1" intercept="1" />
      </feComponentTransfer>
    </filter>
   </defs>
    <g stroke="red">
        <rect x="0" y="0" width="40" height="40" fill="#fff"/>
        <rect x="40" y="0" width="40" height="40" fill="#c0c0c0"/>
        <rect x="80" y="0" width="40" height="40" fill="#808080"/>
        <rect x="120" y="0" width="40" height="40" fill="#404040"/>
        <rect x="160" y="0" width="40" height="40" fill="#000"/>
    </g>    
    <g stroke="blue" filter="url(#linear)">
        <rect x="0" y="40" width="40" height="40" fill="#fff"/>
        <rect x="40" y="40" width="40" height="40" fill="#c0c0c0"/>
        <rect x="80" y="40" width="40" height="40" fill="#808080"/>
        <rect x="120" y="40" width="40" height="40" fill="#404040"/>
        <rect x="160" y="40" width="40" height="40" fill="#000"/>
    </g>    
</svg>
</body>
</html>