JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test1">
    <img src="http://placekitten.com/g/700/300" />
    <img src="http://placekitten.com/g/500/300" />
    <img src="http://placekitten.com/g/300/300" />
    <img src="http://placekitten.com/g/300/700" />
    <img src="http://placekitten.com/g/500/700" />
    <img src="http://placekitten.com/g/700/700" />
</div>
<div class="test2">
    <img src="http://placekitten.com/g/700/300" />
    <img src="http://placekitten.com/g/500/300" />
    <img src="http://placekitten.com/g/300/300" />
    <img src="http://placekitten.com/g/300/700" />
    <img src="http://placekitten.com/g/500/700" />
    <img src="http://placekitten.com/g/700/700" />
</div>

CSS

.test1, .test2 {
    outline: 5px solid;
    margin: 20px;
}
.test1 img {
    max-width: 25%;
    max-height: 25vh;
}
.test2 img {
    max-width: 25%;
}