JSFiddle - React, Tailwind, and code Playground

HTML

<section class="section first-section">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et velit magna. Donec lacus urna, egestas sed bibendum at, pellentesque ut tortor. Donec tempus neque nisl, quis gravida lectus bibendum sed.
    </p>
    <div class="diagonal-background">
        <!-- this is an empty element -->
    </div>
</section>
<section class="section second-section">
    <p>
        Morbi ac tristique magna, in cursus diam. Sed auctor laoreet dolor, at iaculis nulla accumsan eget. Fusce vitae diam malesuada metus eleifend euismod et quis urna. Nulla facilisi. In libero eros, aliquet quis facilisis posuere, rhoncus at ante.
    </p>
</section>

CSS

body {
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-family: sans-serif;
    overflow: hidden;
}
.section {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    min-height: 200px;
    overflow: hidden;
    position: relative;
}
.section p {
    margin: 0 0 1em;
    line-height: 1.5;
}
.first-section {
    background-color: #EF4836;
}
.second-section {
    background-color: #2ECC71;
}
.diagonal-background {
    width: 100%;
    height: 0;
    padding: 6% 0 0;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMCIgaGVpZ2h0PSI2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPCEtLSBDcmVhdGVkIHdpdGggU1ZHLWVkaXQgLSBodHRwOi8vc3ZnLWVkaXQuZ29vZ2xlY29kZS5jb20vIC0tPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IHRyYW5zZm9ybT0icm90YXRlKC0zLjM5NDkyIDUwMC43MzEgNi4yMTE2NCkiIHN0cm9rZS1vcGFjaXR5PSIwIiBpZD0ic3ZnXzIiIGhlaWdodD0iNjAiIHdpZHRoPSIxMDA1IiB5PSItMjMuNzg4MzYiIHg9Ii0xLjc2OTMzMSIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSIjMmVjYzcxIi8+CiA8L2c+Cjwvc3ZnPg==);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
}