JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
    <div class="shape shape-1"></div>
    <div class="shape shape-2"></div>
    <div class="shape shape-3"></div>
    <div class="shape shape-4"></div>
    <div class="container">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magnam unde earum voluptas quae? Molestiae cum suscipit, esse placeat eligendi rerum nam minus inventore. Voluptatum impedit sunt quisquam officiis eius obcaecati totam aliquid incidunt vel aliquam. Nemo quae iusto perferendis corrupti provident sint quisquam, impedit nesciunt architecto a, ea necessitatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, eveniet! Harum saepe quia inventore, atque dolorem culpa debitis. Blanditiis ad ab delectus, magnam assumenda sequi corrupti dolorum incidunt eligendi obcaecati magni! Veniam maxime ratione placeat veritatis excepturi. Nisi sed, dolorum, maxime laboriosam magnam vel aperiam beatae autem dicta, totam commodi? Modi, ratione tempore recusandae nulla suscipit quaerat earum repudiandae vero sit ad dolorem quasi, laboriosam culpa. Sequi, laboriosam assumenda? Aliquid esse impedit cum reprehenderit ex ipsa deleniti nam pariatur alias iusto sit tempore tempora eius optio voluptates veniam, laboriosam aliquam, odio corporis possimus nihil fugiat. Consectetur repellendus fugit dolorum ipsa ullam optio tempora maxime possimus, atque aut doloribus, iusto quam? Repellendus ipsa, praesentium tempore incidunt quasi cumque quidem nostrum harum non facilis doloremque voluptates quis architecto consequuntur consequatur. Illo, eius? Dolorem deserunt ipsam error voluptates necessitatibus iste dolor? Quo adipisci corporis incidunt fuga sapiente recusandae qui...

CSS

body {
    background: #E1F7E7;
    background: -moz-linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(169,232,220,1)), color-stop(50%, rgba(225,247,231,1)), color-stop(100%, rgba(169,232,220,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* ie10+ */
    background: linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e8dc', endColorstr='#a9e8dc',GradientType=1 ); /* ie6-9 */
}
.shape {
    position: fixed;
    transform-origin: center;
}
.shape:after{
    position: absolute;
    content: "";
    left: -25px;
    top: -50px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 500px solid;
}

.shape-1 {
    top: 50px;
    left: 200px;
}
.shape.shape-1:after {
    transform: rotate(190deg);
    border-bottom-color: #A9E8DC;
}

.shape-2 {
    bottom: 300px;
    left: 250px;
}
.shape.shape-2:after {
    transform: rotate(19deg);
    border-bottom-color: #02BEC4;
}
.shape-3 {
    
    bottom: 380px;
    right: 220px;
}
.shape.shape-3:after {
    transform: rotate(-19deg);
    border-bottom-color: #0284A8;
}

.shape-4 {
    top: 200px;
    right: 180px;
}
.shape.shape-4:after {
    transform: rotate(-190deg);
    border-bottom-color: #050C42;
}

@media (max-width: 1450px) {
    .shape.shape-4:after {
        transform: rotate(-190deg);
        border-bottom-color:...

JavaScript

function handler(e){
    let mX = e.clientX;
    let mY = e.clientY;
    $('.shape-1').css("transform", "translate("+mX/10+"px, "+mY/10+"px)");
    $('.shape-2').css("transform", "translate("+mX/3+"px, "+mY/3+"px)");
    $('.shape-3').css("transform", "translate("+mX/5+"px, "+mY/5+"px)");
    $('.shape-4').css("transform", "translate("+mX/7+"px, "+mY/7+"px)");
       
}
const throttledHandler = _.throttle(handler, 500);
$('.shape').css("transition", "transform 7000ms cubic-bezier(0, 1.17, 1, 1)");
window.addEventListener('mousemove', throttledHandler);