JSFiddle - React, Tailwind, and code Playground

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>
    <div class="box"> box 0 </div>
    <div class="box"> box 1 </div>
    <div class="box"> box 2 </div>
    <div class="box"> box 3 </div>
    <div class="box"> box 0 </div>
    <div class="box"> box 1 </div>
    <div class="box"> box 1 </div>

CSS

body {
    background-color: turquoise;
}

.box {
    width: 180px;
    height: 20px;
}

JavaScript

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

jQuery( ".box" ).each(function( x ) {
    jQuery( this ).css({
        backgroundColor: red.alpha( x * 0.1),
        color: blue.alpha( ( 10 - x ) * 0.1 )
    }).animate({
    backgroundColor: $.Color({ saturation: 0 })
}, 1000);;
});