JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input type="number" id="inputField" />
</form>
<div id="box" >

</div>
<p id ="text">

</p>

CSS

#box {
  width:200px;
  height:200px;
}

JavaScript

document.getElementById("inputField").onfocus = function(e) {
	var min = 100;
  var max = 10100;
  var value = parseInt(e.target.value);
	
  var r = 0, g = 0, b = 0;
  
  var range = max - min;
  var fourth = Math.floor(range / 4);
  
  var maxSection = [min + fourth, min + fourth * 2, min + fourth * 3, max];
  var minSection = [min, min + fourth + 1, min + fourth * 2 + 1, min + fourth * 3 + 1];
  
  if (value < 0) {
  	//error
  } else if (value <= maxSection[0]) {
  	//first section max 
    var max = maxSection[0] - minSection[0];
    var val = value - minSection[0];
    var temp = max * val / 255
    r = 0;
    g = 0;
    b = temp;
  } else if (value <= maxSection[1]) {
  	//second section
    var max = maxSection[1] - minSection[1];
    var val = value - minSection[1];
    var temp = max * val / 255
    r = 0;
    g = temp;
    b = 255 - temp;
  } else if (value <= maxSection[2]) {
  	//third section
    var max = maxSection[2] - minSection[2];
    var val = value - minSection[2];
    var temp = max * val / 255
    r = temp
    g = 255;
    b = 0;
  } else if (value <= maxSection[3]) {
  	//last section
    var max = maxSection[3] - minSection[3];
    var val = value - minSection[3];
    var temp = max * val / 255
    r = 255;
    g = 255 - temp;
    b = 0;
  } else {
  	//error
    
  }
	var box = document.getElementById("box");
  box.style.backgroundColor = "rgb(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ")";
}