JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">

  <!--====Added this line====-->
  <div class="display-image" alt=""></div>
  <!--=======================-->

  <!--====Removed the clipping path====-->
  <div class="frameBox"><img alt="" src="https://i.imgur.com/jbHkPuf.png"></div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.display-image {
  width: 184px;
  height: 322px;
  display: block;
  background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"');
  background-size: cover;
  top: 165px;
  left: 219px;
  position: absolute;
  transform: rotate(0.2deg);
  z-index: -1;
}

.itemBox {
  position: relative;
  box-sizing: border-box;
}

.frameBox {
  z-index: 1;
}