JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<script src="http://code.jquery.com/color/jquery.color.js"></script>
<p><a href="#" id="ani">Click me to animate</a></p>
<div class="test" id="one">
    &nbsp;
</div>
<div class="test" id="two">
</div>
<div class="test" id="three">
</div>
<div class="test" id="four">
</div>
<div class="test" id="five">
</div>
<div class="test" id="six">
</div>

CSS

.test {
    width: 30px;
    height: 30px;
    margin: 5px 5px;
    padding: 5px 5px;
}

#one {
  background: #f00;
}
#two {
  background: #f80;
}
#three {
  background: #ff0;
}
#four {
  background: #0f0;
}
#five {
  background: #00f;
}
#six {
  background: #80f;
}

JavaScript

$("#ani").click(function() {
    $("div.test").animate({
        backgroundColor: $.Color({
            hue: 180
        })
    }, 2000);
});