JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-row">
    <div class="grid-cell"><img class="long" src="http://placehold.it/350x500"></div>
    <div class="grid-cell"><img class="long" src="http://placehold.it/350x500"></div>
    <div class="grid-cell"><img class="long" src="http://placehold.it/350x500"></div>
    <div class="grid-cell"><img class="long" src="http://placehold.it/350x500"></div>
    <div class="grid-cell"><img class="long" src="http://placehold.it/350x500"></div>
</div>

CSS

.grid-row {
    width: 300px;
    height: 300px;
    display: flex;
    margin: auto;
}

.grid-cell {
    height: 100%;
    width: 25%;
    transition: box-shadow 2s;
    display: flex;
    justify-content: center; /* NEW */
    align-items: center; /* NEW */
}

img {
    width: 60%;
    /* margin: auto; */
    /* height: auto !important; */
    min-height: 1px;
}

.long {
    width: 80%;
    /* height: auto !important; */
}