JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div id='box' ></div>

CSS

#box {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid black;
  background-color: rgba( 0, 0, 200, .5);
  transition: all 1s ease-in;
}

JavaScript

const box = document.getElementById( 'box' );
let r = 0;
let b = 200
for ( let i = 0; i < 200; i++ ) {
	box.style.backgroundColor = `rgb(${r+i}, 0, ${b-i})`; 
}