JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topslide-box-wrapper">
  <div class="topslide-frame">
    <img class="image" src="https://placehold.jp/24/99cc99/339933/922x368.png?text=img" alt="topslide-image">
  </div>
</div>

CSS

.topslide-box-wrapper {
  /*display: flex;*/
  width: 100%;
  height: 389px;
  margin-top: 44px;
  background-image: url('https://placehold.jp/24/9999cc/333399/922x389.png');
  justify-content: center;
  align-items: center;
  z-index: 0;
  position: relative;
}
.topslide-frame {
  height: 368px;
  width: 922px;
  background-image: url('https://placehold.jp/24/cc9999/993333/922x368.png?text=background-image');
  background-position: 20px 20px;
  background-repeat: no-repeat;
  /*
  z-index: 10;
  */
  position: relative;
}
.topslide-frame .image {
  z-index: -1;
  position: relative;
}