JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rotated">
    <img src="http://daler.ru/pictures/1/1920x1200/Ryijenkiy-kotenok-9697.jpg" alt=""/>
    <img class="img-under" src="http://daler.ru/pictures/1/1920x1200/Ryijenkiy-kotenok-9697.jpg" alt=""/>
</div>

CSS

img{
    width:300px;
    height:200px;
    border-radius:10px;
}
.rotated{
    transform: rotate(330deg) skew(45deg) translate(141px,5px);
    position:relative;
}

.img-under{
    display:inline-block;
    position:absolute;
    margin:0;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:300px;
    height:200px;
    transform: translate(-5px,4px);
    border-radius:10px;
    opacity:0.4;
    z-index:-1;
}

.rotated:before{
    content:"";
    display:inline-block;
    position:absolute;
    margin:0;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:300px;
    height:200px;
    background-color:gray;
    transform: translate(-5px,4px);
    border-radius:10px;
    z-index:-2;
    box-shadow: -100px 70px 10px 0px rgba(0,0,0,0.2);
}