JSFiddle - React, Tailwind, and code Playground

by zeen

HTML

<svg width="200" height="200">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="200" height="200">
<image xlink:href="http://i.imgur.com/erHIy.jpg" x="0" y="0" width="200" height="200" />
</pattern>
</defs>
<polygon fill="url(#img1)" stroke-width="3" points='99.50000005960464,0.9999950610674375 99.50000005960464,0.9999950610674375 198,50.249996235584604 198,148.75000002980232 99.50000005960464,198 99.50000005960464,198 1.0000001192092896,148.75000002980232 1.0000001192092896,50.249996235584604 ' onmouseover="evt.target.setAttribute('stroke', 'red');evt.target.setAttribute('stroke-width', '10');" onmouseout="evt.target.setAttribute('stroke-width', '0');"/>
</svg>