JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
  <div class="gallery-block">
    <div class="wrapper">
      <div class="placeholder"></div>
      <img class="image" src="https://via.placeholder.com/350x150"/>
    </div>
  </div>
</div>

CSS

.gallery {
  width: 800px;
  position: relative;
}

.gallery-block {
  position: relative;
  display: inline-block;
}

.wrapper {
  display: inline-block;
  position: relative;
}

.placeholder {
  max-width: 100%;
  background-color: #ccc;
  padding-top: 42.8571429%;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}