JSFiddle - React, Tailwind, and code Playground

HTML

<aside class="skew-neg">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>@jonathansampson.</p>
        <p>This box is skewed.</p>
        <p>In supported browsers.</p>
    </div>
</aside>

CSS

html { 
    background: #FFF;
    color: lightblue;
    font: 16px 'Arial';
    line-height: 150%;
}

aside {
    background: blue;
    margin: 50px auto 0;
    padding: 20px;
    width: 200px;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0,0,0,.9);
    border-radius: 25px;
}

.skew-neg {
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
}

.skew-pos {
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
}