JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<section class="cream invert">
    <h1>Lorem ipsum dolor et mium</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nesciunt perspiciatis odit consequuntur totam obcaecati molestiae nobis commodi voluptatum tempora veniam officia. Possimus dolore unde tenetur numquam officia praesentium magni.</p>
</section>

<section class="tarmac right">
    <h1>Lorem ipsum dolor et mium</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nesciunt perspiciatis odit consequuntur totam obcaecati molestiae nobis commodi voluptatum tempora veniam officia. Possimus dolore unde tenetur numquam officia praesentium magni.</p>
</section>

<section class="peony">
    <h1>Lorem ipsum dolor et mium</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nesciunt perspiciatis odit consequuntur totam obcaecati molestiae nobis commodi voluptatum tempora veniam officia. Possimus dolore unde tenetur numquam officia praesentium magni.</p>
</section>

<section class="navy right">
    <h1>Lorem ipsum dolor et mium</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nesciunt perspiciatis odit consequuntur totam obcaecati molestiae nobis commodi voluptatum tempora veniam officia. Possimus dolore unde tenetur numquam officia praesentium magni.</p>
</section>

<div class="meow"></div>
<div class="meowtwo"></div>

<footer class="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis neque quis enim a delectus dicta rem quisquam libero sunt ratione odit iste repellendus! Ad facere quaerat commodi veniam adipisci accusamus!</p>
</footer>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
body {
    padding: 0;
    margin: 0;
    font-family: 'Helvetica';
}
section {
    width: 100%;
    background: black;
    padding: 20px;
}
h1 {
    margin: 0;
    color: white;
}
p {
    color: white;
}
.invert h1,
.invert p {
    color: #333;
}
.cream {
    background-color: #ECE59A;
}
.tarmac {
    background-color: #848D82;
}
.peony {
    background-color: #FD6E8A;
}
.navy {
    background-color: #2C3B63;
}
.right {
    text-align: right;
}
footer {
    background-color: #333;
    padding: 20px;
}
footer p {
    font-size: 0.7em;
}
.meow {
    background: -webkit-linear-gradient(-45deg, rgba(236,229,154,1) 0,rgba(236,229,154,1) 10px,rgba(253,110,138,1) 10px,rgba(253,110,138,1) 20px,rgba(132,141,130,1) 20px,rgba(132,141,130,1) 30px,rgba(44,59,99,1) 30px,rgba(44,59,99,1) 40px,rgba(37,3,82,1) 40px,rgba(37,3,82,1) 50px,rgba(125,185,232,1) 50px); /* Chrome10+,Safari5.1+ */
    height: 5px;
    width: 100%;
    background-repeat: repeat;
    display: none;
}
.meowtwo {
    height: 10px;
    width: 100%;
    background: blue;
}

JavaScript

console.clear();

var colours = ['ECE59A', 'FD6E8A', '848D82', /*'2C3B63',*/ '250352'],
    current = 0,
    length = 600, // arbitrary
    width = 10,
    i = 0,
    gradStart = '-webkit-linear-gradient(-45deg',
    gradEnd = ')',
    gradMid = '',
    grad = '',
    offset = -(colours.length*width);

function gen() {
    for (i; i<(length/width);i++) {
        gradMid = gradMid + ', #' + colours[current] + ' ' + ((i*width) + offset) + 'px';
        gradMid = gradMid + ', #' + colours[current] + ' ' + (((i+1)*width) + offset) + 'px';
        if(current === (colours.length - 1)) {
            current = 0;
        } else {
            current = current + 1;
        }
    }
}

setInterval(function() {
    gen();
    grad = gradStart + gradMid + gradEnd;
    console.log(grad);
    $('.meowtwo').css('background', grad);
    offset = offset + 1;
    i = 0,
    gradMid = '';
    if (offset > 0) offset = -(colours.length*width);
}, 25);