JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-holder">
    <img src="http://placehold.it/800x500" width="800" height="500" alt="Example Image" />
</div>
<div class="image-holder">
    <img src="http://placehold.it/800x500" width="800" height="500" alt="Example Image" />
</div>
<div class="image-holder">
    <img src="http://placehold.it/800x500" width="800" height="500" alt="Example Image" />
</div>
<div class="image-holder">
    <img src="http://placehold.it/800x500" width="800" height="500" alt="Example Image" />
</div>
<div class="image-holder">
    <img src="http://placehold.it/800x500" width="800" height="500" alt="Example Image" />
</div>
<div class="image-holder">
    <img src="http://placehold.it/800x500" width="800" height="500" alt="Example Image" />
</div>
<div class="image-holder">
    <img src="http://placehold.it/800x500" width="800" height="500" alt="Example Image" />
</div>
<div class="image-holder">
    <img src="http://placehold.it/800x500" width="800" height="500" alt="Example Image" />
</div>
<div class="image-holder">
    <img src="http://placehold.it/800x500" width="800" height="500" alt="Example Image" />
</div>

CSS

.image-holder {
    display: inline-block;
    width: 33.333%;
    position: relative;
}
.image-holder:before {
    content:"";
    display: block;
    padding-top: 62.5%;
}
.image-holder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* irrelevant styles */
body {
    margin: 0;
    font-size: 0;
}
.image-holder {
    background: #eee;
}
.image-holder:nth-child(odd) {
    background: #ddd;
}