JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer_frame">
    <div class="inner_frame">
        <img src="https://pbs.twimg.com/media/BVQIR-8CYAAZzkF.jpg" alt="example"/>
    </div>
</div>

CSS

.outer_frame {
    border: 1px solid #ccc;
    margin: 20px 100px;
    display: inline-block;
}

.inner_frame {
    border: 1px dashed red;
    padding-left: 50px;
    margin-left: -50px;
    -webkit-transform-origin: 100% 0;
    -webkit-transform: rotate(-5deg);
    -ms-transform-origin: 100% 0;
    -ms-transform: rotate(-5deg);
    transform-origin: 100% 0;
    transform: rotate(-5deg);
    overflow: hidden;
}

.inner_frame > img {
    display: block; 
    -webkit-transform-origin: 100% 0;
    -webkit-transform: rotate(5deg);
    -ms-transform-origin: 100% 0;
    -ms-transform: rotate(5deg);
    transform-origin: 100% 0;
    transform: rotate(5deg);
}