JSFiddle - React, Tailwind, and code Playground

HTML

<div id= "div1"> 
<img id="image0" src="http://212.214.80.169:80/mjpg/video.mjpg?COUNTER" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Sweden, region Vasterbottens Lan, Insjon"> 
</div>

<div id= "div2"> 
<img id="image1" src="http://131.155.61.62:80/mjpg/video.mjpg?COUNTER" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Netherlands, region Noord-Brabant, Eindhoven">
</div>

<div id= "div3"> 
<img id="image2" src="http://123.111.182.60:8080/cam_1.cgi" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Korea, Republic Of, region Seoul-T'Ukpyolsi, Seoul">
</div>

<div id= "div4"> 

<img id="image3" src="http://93.87.72.254:8090/mjpg/video.mjpg?COUNTER" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Serbia, region Vojvodina, Novi Pazar">
</div>

<div id= "div5"> 
<img id="image4" src="http://199.89.180.249:8080/?action=stream" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in United States, region Maryland, Annapolis">
</div>

CSS

div {position:absolute; width:50%; height:50%;}
#div1 {top:0; left:0;}
#div2 {top:0; right:0;}
#div3 {bottom:0; left:0;}
#div4 {bottom:0; right:0;}
#div5 {top:50%; left:50%; transform:translateX(-50%) translateY(-50%);}
img {width:100%; height:100%; object-fit:cover;}