JSFiddle - React, Tailwind, and code Playground

HTML

<img id="blue" src="https://s32.postimg.org/yb2x66c2r/pic1.png">
<img id="green" src="https://s32.postimg.org/cd6gcdx2d/pic2.png">
<img id="purple" src="https://s32.postimg.org/d3z6i5zfp/pic3.png">
<img id="yellow" src="https://s32.postimg.org/5peg3j2xx/pic4.png">
<img id="red" src="https://s32.postimg.org/nthgo60md/pic5.png">

CSS

#blue{
margin-top: 10%; 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
}

#green { 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
position: relative;
margin-top: -48.8%; 
}

#purple { 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
position: relative;
margin-top: -48.8%; 
}

#yellow { 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
position: relative;
margin-top: -45.8%; 
}

#pic4 { 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
position: relative;
margin-top: -48.8%; 
}

#red { 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
position: relative;
margin-top: -48.8%; 
}