JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

<div class="con con1">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line lineR line3"></div>
<div class="line lineR line4"></div>
<div class="line lineR line5"></div>
</div>

CSS

body, html, .con {width: 100%; height: 100%; margin:0; padding:0}
.con {
    position: relative;
    overflow: hidden;
}
.line {
    position: absolute;
    height: 1px;
    width: 400%;
    transform-origin: 0 0;
}
.lineR {transform-origin: 100% 100%}

.con1 {
    background: #54a8f6;
}
.con1 .line {
    background: #3793e6;
}
.con1 .line1 {
    transform: rotateZ(-35deg);
    left: -10%;
    top: 50%;
}
.con1 .line2 {
    transform: rotateZ(50deg);
    left: -10%;
    top: 6%;
}
.con1 .line3.lineR {
    transform: rotateZ(12deg);
    left: -10%;
    top: 60%;
    transform-origin: 0 0;
}
.con1 .line4 {
    transform: rotateZ(-125deg);
    right: 45%;
    top: -10%;
}
.con1 .line5 {
    transform: rotateZ(-70deg);
    right: -1%;
    top: 20%;
}


.con2 {
    background: #2cdd8c;
}
.con2 .line {
    background: #08c272;
}
.con2 .line1 {
    transform: rotateZ(-60deg);
    left: -10%;
    top: 110%;
}
.con2 .line2 {
    transform: rotateZ(30deg);
    left: -10%;
    top: 50%;
}
.con2 .line3 {
    transform: rotateZ(-120deg);
    right: 30%;
    top: -10%;
}
.con2 .line4 {
    transform: rotateZ(-125deg);
    right: 35%;
    top: -10%;
}
.con2 .line5 {
    transform: rotateZ(-50deg);
    right: -1%;
    top: 60%;
}


.con3 {
    background: #f76f36;
}
.con3 .line {
    background: #d85a21;
}
.con3 .line1 {
    transform: rotateZ(-45deg);
    left: -10%;
    top: 55%;
}
.con3 .line2 {
    transform: rotateZ(20deg);
    left: -10%;
    top: 60%;
}
.con3 .line3.lineR {
    transform: rotateZ(12deg);
    left: -10%;
    top: 60%;
    transform-origin: 0 0;
}
.con3 .line4 {
    transform: rotateZ(-118deg);
    right: 35%;
    top: -10%;
}
.con3 .line5 {
    transform: rotateZ(-75deg);
    right: -1%;
    top: 25%;
}


.con4 {
    background: #f76f36;
}
.con4 .line {
    background: #d85a21;
}
.con4 .line1 {
    transform: rotateZ(-65deg);
    left: -10%;
    top: 85%;
}
.con4 .line2 {
    transform: rotateZ(22deg);
    left: -10%;
    top: 65%;
}
.con4 .line3.lineR {
 ...

JavaScript

$(function() {
    var curPage = 0;
    var numPages = 5;
    $('body').click(function() {
        var curCon = curPage + 1;
        var nextCon = curCon + 1;
        if (nextCon > numPages) {
            nextCon = 1;
        }
        curPage = nextCon - 1;
        $('.con', this).removeClass('con' + curCon).addClass('con' + nextCon);
    });
});