JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <div class="grid-item"><img src="http://placehold.it/330x550&text=1" alt=""/></div>
    <div class="grid-item"><img src="http://placehold.it/330x550&text=2" alt=""/></div>
    <div class="grid-item"><img src="http://placehold.it/330x550&text=3" alt=""/></div>
    <div class="grid-item"><img src="http://placehold.it/330x550&text=4" alt=""/></div>
    <div class="grid-item"><img src="http://placehold.it/330x550&text=5" alt=""/></div>
    <div class="grid-item"><img src="http://placehold.it/330x550&text=6" alt=""/></div>
    <div class="grid-item"><img src="http://placehold.it/330x550&text=7" alt=""/></div>
    <div class="grid-item"><img src="http://placehold.it/330x550&text=8" alt=""/></div>
</div>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.grid {
    width: 300px;
    height: 500px;
    border: 1px solid red;
}

.grid-item {
    float: left;
    width: 25%;
    overflow: hidden;
    height: 50%;
    position: relative;
    border: 1px solid green;
}

.grid-item img {
    height: 100%;
    width: 148px;   
    height: 247px;
    margin: 0 auto;
}