JSFiddle - React, Tailwind, and code Playground

by JoshC

HTML

<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper mattis risus cursus lobortis. Etiam in erat erat. Morbi venenatis quam enim, elementum bibendum elit sollicitudin mollis. Integer rutrum orci sed cursus consectetur. Aliquam vitae consequat augue. Suspendisse pharetra sit amet lacus eget semper. Sed condimentum suscipit faucibus.</p></div>
<div><p>Lorem ipsum dolcing elit. Sed ullamcorper mattis risus cursus lobortis. Etiam in erat erat. Morbi venenatis quam enim, elementum bibendum elit sollicitudin mollis. Integer rutrum orci sed cursus consectetur. Aliquam vitae consequat augue. Suspendisse pharetra sit amet lacus eget semper. Sed condimentum suscipit faucibus.</p></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper mattis risus cursus lobortis. Etiam in erat erat. Morbi venenatis quam enim, elementum bibendum elit sollicitudin mollis. Integer rutrum orci sed cursus consectetur. Aliquam vitae consequat augue.</p></div>

CSS

body {
    margin:50px;
    min-width:400px;
    background:white;
}
div:nth-child(1) {
    background:rgb(122, 206, 122);
    height:140px;
    transform: skew(-10deg) rotate(2deg);
    -webkit-transform: skew(-10deg) rotate(2deg);
    -moz-transform: skew(-10deg) rotate(2deg);
}
div:nth-child(1) p {
    transform: skew(10deg) rotate(-2deg);
    -webkit-transform: skew(10deg) rotate(-2deg);
    -moz-transform: skew(10deg) rotate(-2deg);
    padding:3% 2%;
}
div:nth-child(2) {
    border-bottom: 180px solid rgb(233, 233, 65);
    border-left: 8px solid transparent;
    border-right: 14px solid transparent;
    height: 0;
    margin-top:60px;
    transform:rotate(3deg);
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
}
div:nth-child(2) p {
    transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    padding:3.5% 3%;
}
div:nth-child(3) {
    border-top: 140px solid rgb(253, 74, 74);
    border-left: 23px solid transparent;
    border-right: 14px solid transparent;
    height: 0;
    margin-top:20px;
    transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
}
div:nth-child(3) p {
    transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
    -moz-transform:rotate(-2deg);
    position:absolute;
    top:-140px;
    padding:3% 3%;
}
div:nth-child(3):before {
    content:'';
    width:124%;
    height:80px;
    background:white;
    position:absolute;
    left:-20%;
    bottom:120px;
    transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
}