JSFiddle - React, Tailwind, and code Playground

HTML

<div class="musicwrap_container">  
                <div class="angledwrapper">
                    <div class="angledtop"></div>
                    <div class="mindycontentwrap">
                        <img src="xxxxx/images/Jane.png" title="Jane" alt="Jane" class="Jane">
                        <div class="angledcontent"></div>
                    </div>
                    <div class="angledwrapbottom"></div>
                </div>
            </div>

CSS

.angledwrapper{
    width: 105%;
    float: left;
    margin-left: -13px;
    margin-top: 65px;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
} 
.mindycontentwrap{
    width:100%;
    float:left;
    background:#fff;
}
.angledcontent{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    float: left;
    min-height: 200px;
    width: 67%;
}
.angledwrapbottom{
    width:100%;
    float:left;
    background:#fff;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.angledtop{
    width: 105%;
    float: left;
    background: #fff;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.Jane{
    position: relative;
    max-width: 30%;
    float: left;
}