JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <img class="img1" src="http://dummyimage.com/200/ccc/000.png&text=image+1" />
    <img class="img2"  src="http://dummyimage.com/200/ccc/000.png&text=image+2" />
    <img class="img3"  src="http://dummyimage.com/200/ccc/000.png&text=image+3" />
    <img class="img4"  src="http://dummyimage.com/200/ccc/000.png&text=image+4" />
    <img class="img5"  src="http://dummyimage.com/200/ccc/000.png&text=image+5" />
</div>

CSS

.container{
     position:relative;
     border:1px solid red;
    width:500px;
    height:500px;
}
.container img{
    position:absolute;
    border:1px solid green;
}
.img1{top:0px; left:0px; z-index:1;opacity:.5}
.img2{top:10px; left:10px; z-index:2;opacity:.5}
.img3{top:20px; left:20px; z-index:3;opacity:.5}
.img4{top:30px; left:30px; z-index:4;opacity:.5}
.img5{top:40px; left:40px; z-index:5;opacity:.5}