JSFiddle - React, Tailwind, and code Playground

by Corey Frang

HTML

<script src="http://code.jquery.com/color/jquery.color.js"></script>
    <div class="box"> box 0 </div>
    <div class="box"> box 1 </div>
    <div class="box"> box 2 </div>
    <div class="box"> box 3 </div>

CSS

body {
    background-color: blue;
}

.box {
    width: 50px;
    height: 50px;
}

JavaScript

var red = jQuery.Color( "red" ),
    black = jQuery.Color( "black" );

jQuery( ".box" ).each(function( x ) {
    jQuery( this ).css({
        backgroundColor: red.alpha( x * 0.3333 ),
        color: black.alpha( ( 3 - x ) * 0.3333 )
    });
});