JSFiddle - React, Tailwind, and code Playground

HTML

<div>
   <span class="col">
       <img class="h100"></img>
       <img class="h50"></img>
   </span>
   <span class="col">
       <img class="h50"></img>
       <img class="h40"></img>
   </span>
   <span class="col">
       <img class="h60"></img>
       <img class="h100"></img>
   </span>
   <span class="col">
       <img class="h60"></img>
       <img class="h40"></img>
   </span>
   <span class="col">
       <img class="h90"></img>
       <img class="h10"></img>
   </span>
</div>

CSS

.col{display:inline-block;width:50px;margin:0px 5px;vertical-align:top;}
img{width:100%;margin:5px 0px;display:block;background:#bbb;}

.h100{height:100px;}
.h90{height:90px;}
.h60{height:60px;}
.h50{height:50px;}
.h40{height:40px;}
.h10{height:10px;}