JSFiddle - React, Tailwind, and code Playground

HTML

<div></div><div></div><div></div><div></div><div></div><div></div>

CSS

html, body {height: 100%;margin: 0;}
div {display: inline-block;vertical-align: top;width: 16.6%;height: 5px}
div:nth-child(1) {background: rgb(255, 0, 0)}
div:nth-child(2) {background: rgb(255, 0, 255)}
div:nth-child(3) {background: rgb(0, 0, 255)}
div:nth-child(4) {background: rgb(0, 255, 255)}
div:nth-child(5) {background: rgb(0, 255, 0)}
div:nth-child(6) {background: rgb(255, 255, 0)}

JavaScript

function adjustVars(){

	w = window.innerWidth;
	d = w / l;

}

function colorize(e){
	
	var x 			= e.clientX,
		index 		= Math.floor((x*l) / w),
		colorStart	= colors[index],
		colorEnd	= colors[index < l-1 ? index+1 : 0];

	var r = Math.ceil(colorStart[0] - ((colorStart[0] - colorEnd[0])  * (x - d * index) / d)),
		g = Math.ceil(colorStart[1] - ((colorStart[1] - colorEnd[1])  * (x - d * index) / d)),
		b = Math.ceil(colorStart[2] - ((colorStart[2] - colorEnd[2])  * (x - d * index) / d));

	document.body.style.background = "rgb("+r+","+g+","+b+")";

}

var colors = [
		[255, 0, 0],
		[255, 0, 255],
		[0, 0, 255],
		[0, 255, 255],
		[0, 255, 0],
		[255, 255, 0]
	];

var l = colors.length,
	w = window.innerWidth,
	d = w / l;

document.addEventListener("mousemove", colorize, false);
window.addEventListener("resize", adjustVars, false);