JSFiddle - React, Tailwind, and code Playground

HTML

<div class="feature">
    <img src="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg">
    <svg class="glass">
        <image width="980" height="652" xlink:href="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg" clip-path="url(#svg-mask)" />
        <defs>
            <pattern width="1" height="1" id="pat1" viewBox="325 110 150 150" preserveAspectRatio="xMidYMid slice">
                <image width="980" height="652" xlink:href="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg" style="filter:url(#svg-blur);" />
            </pattern>
            <filter id="svg-blur">
                <feGaussianBlur stdDeviation="10" />
            </filter>
        </defs>
        <rect x="325" y="110" rx="40" ry="40" width="150" height="150" style="fill:url('#pat1');stroke:red;stroke-width:5;" />
    </svg>
</div>

CSS

body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
  .feature {
    position: relative;
  }
  .glass {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  #svg-image {
    filter:url(#svg-blur);
  }

  .svg-subject{
    font-weight: bold;
  }