JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 391.6px; height: 369.6px; left: 239.6px; top: 28.9px; position: absolute;">
  <div class="imageOuterStyleWrapper">
    <div class="imageMiddleStyleWrapper" style="filter: drop-shadow(rgb(139, 69, 19) 19.6px 0px 0px) drop-shadow(rgb(139, 69, 19) 0px 19.6px 0px) drop-shadow(rgb(139, 69, 19) -19.6px 0px 0px) drop-shadow(rgb(139, 69, 19) 0px -19.6px 0px); width: calc(100% - 39.16px); height: calc(100% - 39.16px); padding: 19.58px;">
      <div class="imageInnerStyleWrapper" style="clip-path: url(&quot;#Mask-2&quot;);"><img src="http://wiesmann.codiferes.net/share/bitmaps/test_pattern.svg"></div>
    </div>
  </div>
</div>


<svg width="0" height="0">
  <defs>
    <clipPath id="Mask-2" clipPathUnits="objectBoundingBox">
      <circle x="0" y="0" width="1" height="1" cx=".5px" cy=".5px" r=".5px"/>
    </clipPath>
  </defs>
</svg>

CSS

div, img {
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}