JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <img class="s-1-3" src="http://placehold.it/100x100" alt="">
  <img class="s-1-3" src="http://placehold.it/100x100" alt="">
  <img class="s-1-3" src="http://placehold.it/100x100" alt="">
  <img class="s-1-3" src="http://placehold.it/100x200" alt="">
  <img class="s-2-3" src="http://placehold.it/200x100" alt="">
  <img class="s-1-3" src="http://placehold.it/100x100" alt="">
  <img class="s-1-3" src="http://placehold.it/100x100" alt="">
</div>

CSS

.grid {

  max-width: 300px;

}

img {
  float: left;
  
  outline: 1px solid #fff;
}

.s-1-3 {
  width: 33.33333%;
}

.s-2-3 {
  width: 66.66666666%;
}