JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
        <image xlink:href="http://placehold.it/100x100/ff0000" x="0" y="0" width="100" height="100" />
    </pattern>
    <pattern id="img2" patternUnits="userSpaceOnUse" width="100" height="100">
        <image xlink:href="http://placehold.it/100x100/00ff00" x="0" y="0" width="100" height="100" />
    </pattern>
    <pattern id="img3" patternUnits="userSpaceOnUse" width="100" height="100">
        <image xlink:href="http://placehold.it/100x100/0000ff" x="0" y="0" width="100" height="100" />
    </pattern>
  <mask id="mask1" x="0" y="0" width="100" height="100" >
    <rect x="0" y="-50" rx="20" ry="20" width="200" height="100"
        style="stroke:none; fill: #ffffff"/>
    <rect x="0" y="50" width="200" height="50"
        style="stroke:none; fill: #ffffff"/>
    <rect x="-130" y="50" rx="20" ry="20" width="200" height="100"
        style="stroke:none; fill: #000000"/>
    <rect x="70" y="50" rx="20" ry="20" width="200" height="100"
        style="stroke:none; fill: #000000"/>
  </mask>
</defs>


<rect x="0" y="0" width="100" height="100" style="stroke: none; mask: url(#mask1)"/>
</svg>

CSS

svg rect {
    fill: url(#img1);
}
svg rect:hover {
    fill: url(#img2);
}
svg rect:active {
    fill: url(#img3);
}