JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <!--  Image start  -->
  <div class="image-wrapper">
    <img src="https://dummyimage.com/1500x1000/000/fff" alt="" />
  </div>
  <div class="image-wrapper">
    <img src="https://dummyimage.com/1500x1000/000/fff" alt="" />
  </div>
  <div class="image-wrapper">
    <img src="https://dummyimage.com/1500x1000/000/fff" alt="" />
  </div>
  <!--  Image end  -->
</div>

CSS

.container {
  display:flex;
  flex-wrap: wrap;
}

.image-wrapper {
  flex: 1 0 100%;;
  position: relative;
  padding-bottom: 56.2%;
}

.image-wrapper img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
}