JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<div class="flowLayoutFrame" style="width: 204.532px; height: 205.894px; left: 100px; top: 100px; position: absolute;">
  <div class="imageOuterStyleWrapper">
    <div class="imageMiddleStyleWrapper" style="filter: drop-shadow(rgb(255, 0, 0) 3.39px 0px 0px) drop-shadow(rgb(255, 0, 0) -3.39px 0px 0px); width: calc(100% - 6.79111px); height: calc(100% - 6.79111px); padding: 3.39556px;">
      <div class="imageInnerStyleWrapper" style="clip-path: url(#Mask-2);">
        <img src="https://plicbooks.com/css/images/image-placeholder.png">
      </div>
    </div>
    
    <div class="imageMiddleStyleWrapper" style="filter: drop-shadow(rgb(255, 0, 0) 0px 3.39px 0px) drop-shadow(rgb(255, 0, 0) 0px -3.39px 0px); width: calc(100% - 6.79111px); height: calc(100% - 6.79111px); padding: 3.39556px;">
      <div class="imageInnerStyleWrapper" style="clip-path: url(#Mask-2);">
        <img src="https://plicbooks.com/css/images/image-placeholder.png">
      </div>
    </div>
    
    <!--<div class="imageMiddleStyleWrapper" style="filter: drop-shadow(rgb(255, 0, 0) 3.39px 3.39px 0px) drop-shadow(rgb(255, 0, 0) -3.39px -3.39px 0px); width: calc(100% - 6.79111px); height: calc(100% - 6.79111px); padding: 3.39556px;">
      <div class="imageInnerStyleWrapper" style="clip-path: url(#Mask-2);">
        <img src="https://plicbooks.com/css/images/image-placeholder.png">
      </div>
    </div>-->
  </div>
</div>


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

CSS

.imageOuterStyleWrapper,
.imageMiddleStyleWrapper,
.imageInnerStyleWrapper,
img {
  width: 100%;
  height: 100%;
}

.imageMiddleStyleWrapper {
  position: absolute;
  left: 0;
  top: 0;
}