JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<div class="flowContent" style="width: 100px; height: 178px;">
  <div class="imageOuterStyleWrapper drop-shadow-border">
    <div class="imageInnerStyleWrapper" style="clip-path: url('#Mask-3'); -webkit-clip-path: url('#Mask-3');">
      <img src="https://test.plicbooks.com/ajax/getPhoto.php?id=ba08325c-bfb7-453f-9176-8b5947c76c25&photo_name=101.png&opts[w]=300">
    </div>
  </div>
</div>

<div class="flowContent" style="width: 100px; height: 180px; position: relative;">
  <img style="width: calc(100% - 8px); height: calc(100% - 8px); position: absolute; left: 4px; top: 4px; clip-path: url('#Mask-3'); -webkit-clip-path: url('#Mask-3');" src="https://test.plicbooks.com/ajax/getPhoto.php?id=ba08325c-bfb7-453f-9176-8b5947c76c25&photo_name=101.png&opts[w]=300">
  <img style="width:100%; height: 100%; position: absolute; left: 0px; top: 0px; filter: url(#BorderFilter); clip-path: url('#Mask-3'); -webkit-clip-path: url('#Mask-3'); z-index: -2;" src="https://test.plicbooks.com/ajax/getPhoto.php?id=ba08325c-bfb7-453f-9176-8b5947c76c25&photo_name=101.png&opts[w]=300">
</div>




<div class="flowContent" style="width: 100px; height: 178px;">
  <div class="imageOuterStyleWrapper drop-shadow-border">
    <div class="imageInnerStyleWrapper" style="clip-path: url('#Mask-3'); -webkit-clip-path: url('#Mask-3');">
      <img src="https://test.plicbooks.com/ajax/getPhoto.php?id=99a9da72-1b17-4200-8338-8d2196827a78&photo_name=101.png&opts[w]=300">
    </div>
  </div>
</div>

<div class="flowContent" style="width: 100px; height: 180px; position: relative;">
  <img style="width: calc(100% - 8px); height: calc(100% - 8px); position: absolute; left: 4px; top: 4px; clip-path: url('#Mask-3'); -webkit-clip-path: url('#Mask-3');" src="https://test.plicbooks.com/ajax/getPhoto.php?id=99a9da72-1b17-4200-8338-8d2196827a78&photo_name=101.png&opts[w]=300">
  <img style="width:100%; height: 100%; position: absolute; left: 0px; top: 0px; filter: url(#BorderFilter); clip-path: url('#Mask-3');...

CSS

body {
  background-color: grey;
}

.flowContent {
  float: left;
}

.imageInnerStyleWrapper,
.imageOuterStyleWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.imageInnerStyleWrapper {
  overflow: hidden;
}

.imageInnerStyleWrapper img {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.drop-shadow-border {
  filter:
    drop-shadow(2px 0px 0 black)
    drop-shadow(1px 0px 0 black)
    drop-shadow(0px 2px 0 black)
    drop-shadow(0px 1px 0 black)
    drop-shadow(-2px -0px 0 black)
    drop-shadow(-1px -0px 0 black)
    drop-shadow(-0px -2px 0 black)
    drop-shadow(-0px -1px 0 black);
}