JSFiddle - React, Tailwind, and code Playground

by ansonhoyt

HTML

<img src="http://farm5.staticflickr.com/4111/5088772862_a95b336da2.jpg"  width="500" height="333">
<img src="http://farm5.staticflickr.com/4111/5088772862_a95b336da2.jpg"  width="500" height="333">
<img src="http://farm5.staticflickr.com/4111/5088772862_a95b336da2.jpg"  width="500" height="333">
<img src="http://farm5.staticflickr.com/4111/5088772862_a95b336da2.jpg"  width="500" height="333">
<img src="http://farm5.staticflickr.com/4111/5088772862_a95b336da2.jpg"  width="500" height="333">

CSS

img {
    position: absolute;
}
img:nth-of-type(1) {
    clip: rect(0px 100px 333px 0px);
    -webkit-transform-origin: 0px top;
    -webkit-transform: scaleX(0.6);
}
img:nth-of-type(2) {
    left: -39px;
    clip: rect(0px 200px 333px 100px);
    -webkit-transform-origin: 100px top;
    -webkit-transform: scaleX(0.8);
}
img:nth-of-type(3) {
    left: -58px;
    clip: rect(0px 300px 333px 200px);
}
img:nth-of-type(4) {
    left: -57px;
    clip: rect(0px 400px 333px 300px);
    -webkit-transform-origin: 300px top;
    -webkit-transform: scaleX(0.8);
}
img:nth-of-type(5) {
    left: -76px;
    clip: rect(0px 500px 333px 400px);
    -webkit-transform-origin: 400px top;
    -webkit-transform: scaleX(0.6);
}