JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid3x3">
 <div><img src="http://placekitten.com/200/300"></div>
 <div><img src="http://placekitten.com/240/300"></div>
 <div><img src="http://placekitten.com/400/300"></div>
 <div><img src="http://placekitten.com/280/300"></div>
 <div><img src="http://placekitten.com/210/140"></div>
 <div><img src="http://placekitten.com/240/200"></div>
 <div><img src="http://placekitten.com/50/50"></div>
 <div><img src="http://placekitten.com/200/100"></div>
 <div><img src="http://placekitten.com/700/300"></div>
</div>

CSS

.grid3x3{
 width:600px;
 height:600px;
 clear:both;
 border-radius:8px;
 box-shadow:inset 2px 4px 8px 0 hsla(0,0%,0%,.2);
}
.grid3x3>div{
 width:200px;
 height:200px;
 float:left;
 line-height:200px;
 text-align:center;
 
}
.grid3x3>div>img{
 display:inline-block;
 vertical-align:middle;
 max-width:70%;
 max-height:70%;
 border-radius:4px;
 box-shadow:2px 4px 8px 0 hsla(0,0%,0%,.2);
}