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 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;
      -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  transition: all 150ms linear;
}
.line {
    position: absolute;
    height: 1px;
    width: 400%;
    transform-origin: 0 0;
    background: rgba(0,0,0,0.1);
    
    
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
}
.lineR {transform-origin: 100% 100%}

.con1 {
    background: #5FA5F8;
}

.con1 .line1 {
    transform: rotateZ(-35deg);
    left: -10%;
    top: 50%;
}
.con1 .line2 {
    transform: rotateZ(50deg);
    left: -10%;
    top: 6%;
}
.con1 .line3 {
    transform: rotateZ(12deg);
    left: -10%;
    top: 60%;
}
.con1 .line4 {
    transform: rotateZ(-125deg);
    right: 45%;
    top: -10%;
}
.con1 .line5 {
    transform: rotateZ(-70deg);
    right: -1%;
    top: 20%;
}


.con2 {
    background: #3ADCB7;
}
.con2 .line1 {
    transform: rotateZ(-60deg);
    left: -10%;
    top: 110%;
}
.con2 .line2 {
    transform: rotateZ(30deg);
    left: -10%;
    top: 50%;
}
.con2 .line3 {
    transform: rotateZ(-50deg);
    left: 45%;
    top: 214%;
}
.con2 .line4 {
    transform: rotateZ(-125deg);
    right: 35%;
    top: -10%;
}
.con2 .line5 {
    transform: rotateZ(-120deg);
    right: 30%;
    top: -10%;
}


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


.con4 {
    background: #F5983F;
}
.con4 .line1 {
    transform: rotateZ(-65deg);
    left: -10%;
    top:...

JavaScript

$(function() {
    var curPage = 0;
    var numPages = 6;
    $('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);
    });
});