JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
    img {
        height: 400px;
        width: 300px;
    }

    #container {
        border: 3px solid orange;
        position: relative;
        overflow: hidden;
        height: 400px;
        width: 530px;
    }
    
    #rotated {
        display: inline-block;
        -webkit-transform: rotate(10deg);
        -webkit-transform-origin: bottom left;
        position: absolute;
        overflow: hidden;
        bottom: 0px;
        padding-top: 100px;
        height: 400px;
        width: 800px;
        left: 220px;
        border-left: 3px solid orange;
    }
    
    #rotated img {
        -webkit-transform: rotate(-10deg);
        margin-left: -30px;
        margin-top: -25px;
    }
</style>
</head>

<body>
    <div id="container">
        <img src="http://files.sharenator.com/rk5wg9_The_epic_LOLcat_post-s450x562-81088.jpg"/>
        <div id="rotated">
            <img src="http://i.techrepublic.com.com/blogs/lolcat-attack.png"/>
        </div>
    </div>
</body>
</html>