JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>


</style>
</head>
<body>
<div style="Font-Size:30px;">Try to augment the value in the white input elements with up and down arrow to change the linear-Gradient colors. Clique on the div to choose your body's background color. Click again to choose another color.</div>
<div style="border:gray solid 2px;height:575px;width:700px;position:absolute;top:75px;right:15px;background:black;color:white;font-Family:Century SchoolBook;font-Size:18px;padding-Top:20px;" id="container101"><div id="headerioux" style="text-Align:center">ColorPicker</div><div id="div101" style="position:absolute;
top:60px;
left:100px;
width:500px;
height:500px;">
</div><canvas height="500" width="500" style="position:absolute;top:60px;left:100px;display:none;" id="canva"></canvas>

</div>

<script>
function create(r1,g1,b1,r2,g2,b2){dv101 = document.querySelector("#div101");dv101.style.background = "linear-gradient(90deg, rgb("+r1+", "+g1+", "+b1+"), rgb("+r2+", "+g2+", "+b2+"))";
var can = document.querySelector("#canva");
var context = can.getContext("2d");
context.rect(0, 0, 500, 500);
var grd = context.createLinearGradient(0,0,can.width,0);
grd.addColorStop(0, "rgb("+r1+", "+g1+", "+b1+")");
grd.addColorStop(1, "rgb("+r2+", "+g2+", "+b2+")");
context.fillStyle = grd;
context.fillRect(0,0,500,500);
var aaa = 1;
dv101.onmousedown = (event) => {
if(aaa==1){aaa=0}else{aaa=1};

}

dv101.onmousemove = (event) => {
var posx = event.clientX-dv101.offsetLeft-document.querySelector("#container101").offsetLeft;
var posy = event.clientY-dv101.offsetTop-document.querySelector("#container101").offsetTop;
console.log(posx,posy);
var data = context.getImageData(posx,posy,1,1);
if(aaa==1){
document.body.style.background="rgb("+data.data[0]+","+data.data[1]+","+data.data[2]+")";
console.log('x');
}

}
};create(0, 255, 0, 0, 0, 255);
var arr = new Array();
function inp(x,y){
var input1 = document.createElement('input');
var cont =...