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;
        }
img{
					width: 60%;
					margin: auto;
					height:auto !important;
					min-height: 1px;
				}
.long{
					width: 80%;
					height:auto !important;
			}