JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="_1977">
    <feFlood x="0" y="0" width="100%" height="100%" flood-color="rgb(243, 106, 188)" flood-opacity="0.3" />
    <feBlend in2="SourceGraphic" mode="screen" color-interpolation-filters="sRGB" />
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="linear" slope="1.1" intercept="-0.05" />
      <feFuncG type="linear" slope="1.1" intercept="-0.05" />
      <feFuncB type="linear" slope="1.1" intercept="-0.05" />
    </feComponentTransfer>
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="linear" slope="1.1" />
      <feFuncG type="linear" slope="1.1" />
      <feFuncB type="linear" slope="1.1" />
    </feComponentTransfer>
    <feColorMatrix type="saturate" color-interpolation-filters="sRGB" values="1.3" result="Z" />
  </filter>
</svg>

<svg width="400" height="400">
  <image xlink:href="http://una.im/CSSgram/img/atx.jpg" width="400" height="400"></image>
</svg>

<svg width="400" height="400">
  <image xlink:href="http://una.im/CSSgram/img/atx.jpg" width="400" height="400" filter="url(#_1977)"></image>
</svg>

CSS

body {
  margin: 0;
}

svg {
  display: block;
  float: left;
}