JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapper'>
  <figure><img src='https://placehold.it/150x100' /></figure>
  <figure><img src='https://placehold.it/170x100' /></figure>
  <figure><img src='https://placehold.it/120x100' /></figure>
  <figure><img src='https://placehold.it/150x100' /></figure>
  <figure><img src='https://placehold.it/70x100' /></figure>
  <figure><img src='https://placehold.it/80x100' /></figure>
  <figure><img src='https://placehold.it/90x100' /></figure>
  <figure><img src='https://placehold.it/100x100' /></figure>
</div>

CSS

#wrapper {
  display: flex;
  flex-wrap: wrap;
}
#wrapper > figure {
  margin: 0;
  padding: 0;
  flex: auto;
}
#wrapper > figure > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border: solid 1px black;
  
}