JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<section>
    <p>Floating in a sea of change.</p>
</section>

CSS

section {
    width: 300px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50px;
    z-index: 1;
    padding: 20px 20px 20px 30px;
    -webkit-transform: skew(-15deg);
    background: #669AE2;
}
    section > p {
        -webkit-transform: skew(15deg);
        color: #f7f7f7;
        text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    }