JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<img src="http://placehold.it/960x240/000000/FFFFFF.png&text=Illustration" alt="">
<div>
    <p>Suspendisse tincidunt iaculis sollicitudin. Duis viverra odio sit amet tristique scelerisque. Cras ultrices imperdiet hendrerit. Nam eu pellentesque velit, sed tristique tellus. Curabitur eget nunc aliquam diam tincidunt posuere non convallis nullam.
</p>
</div>
    <div class="blue">
    <p>Suspendisse tincidunt iaculis sollicitudin. Duis viverra odio sit amet tristique scelerisque. Cras ultrices imperdiet hendrerit. Nam eu pellentesque velit, sed tristique tellus. Curabitur eget nunc aliquam diam tincidunt posuere non convallis nullam.
</p>
</div>
<div class="green">
    <p>Suspendisse tincidunt iaculis sollicitudin. Duis viverra odio sit amet tristique scelerisque. Cras ultrices imperdiet hendrerit. Nam eu pellentesque velit, sed tristique tellus. Curabitur eget nunc aliquam diam tincidunt posuere non convallis nullam.
</p>
</div>

CSS

body {padding:0; margin:0; font-family:Arial;}
img {width:100%; height:auto;}
p {position: relative; z-index:1;}
div {background:red; position: relative; height:100px; margin:-20px 0 0; padding:20px 20px 70px;}
div:before, div:after {content:""; display: block; top: 0; height:100px; background: red; width: 100%; position: absolute;}
div:before {left: 0; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg);}
div:after {right: 0; -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg);}

.blue {background:blue;}
.blue:before, .blue:after {background:blue;}

.green {background:lightgreen;}
.green:before, .green:after {background:lightgreen;}