JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images">
   <img src="http://placehold.it/200x200" />
   <img src="http://placehold.it/400x200" />
   <img src="http://placehold.it/400x200" />
   <img src="http://placehold.it/200x200" />
   <img src="http://placehold.it/200x200" />
   <img src="http://placehold.it/200x200" />
   <img src="http://placehold.it/200x200" />
   <img src="http://placehold.it/200x200" />
   <img src="http://placehold.it/400x200" />
   <img src="http://placehold.it/300x200" />
   <img src="http://placehold.it/300x200" />
</div>

CSS

*{
   box-sizing:border-box
}

.images {
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
}

img {
  outline: 10px solid #fff;
}