JSFiddle - React, Tailwind, and code Playground

HTML

<div class="out">
    <div class="in"></div>
</div>

CSS

body { background:url(http://www.placecage.com/g/640/480) }
.out {
    height: 100px;
    width: 150px;
    transform-origin: 0% 100%;
    transform: skew(-10deg);
    overflow: hidden;
}
.in {
    height: 110px;
    width: 148px;
    position: relative;
    left: -43px;
    top: -7px;
    transform-origin: 0% 0%;
    transform: skew(30deg) rotate(10deg);
    background: rgba(9,40,0,0.8);
    transition: 0.5s ease;
}
.in:hover {
    background: rgba(50,0,70,0.7);
    transition: 0.5s ease;
}