JSFiddle - React, Tailwind, and code Playground
HTML
<div class="second--image">
<div>
<div>
<img src="http://via.placeholder.com/200x100" class="image image-2">
</div>
</div>
</div>
<div class="first_third--image">
<img src="https://placeimg.com/640/480/any" class="first--image image image-1">
<div class="third--image">
<img src="http://via.placeholder.com/350x150" class="image image-3">
</div>
</div>
CSS
.container {
width: 400px;
position: fixed;
}
.image {
width: 300px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
font-weight: 300;
}
.second--image,
.first--image,
.third--image {
position: absolute;
}
.first_third--image {
position: relative;
}
.first--image.image {
z-index: 1;
}
.second--image {
z-index: 2;
}
.third--image {
z-index: 3;
}