JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

</head>
<body>
<div id="game">

</div>
</body>
</html>

CSS

#color-picker-line {
    position: absolute;
    top: 10px;
    left: 35px;
}

#color-picker-line-picker {
    width: 10px;
    height: 10px;
    position: absolute;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
}

#color-picker-line-container {
    position: absolute;
    left: 70px;
    top: 10px;
}

JavaScript

function clamp(number, minimum, maximum) {
	return Math.min(Math.max(number, minimum), maximum);
}
let game = document.getElementById("game");
let canvas2 = document.createElement('canvas');
	canvas2.id = 'color-picker-line';
	canvas2.width = 35;
	canvas2.height = 200;
	game.append(canvas2);
	let context2 = canvas2.getContext('2d');
	let gradient2 = context2.createLinearGradient(0, 0, 0, canvas2.height);
	gradient2.addColorStop(0, "hsl(0, 100%, 50%)");
	gradient2.addColorStop(1 / 6, "hsl(60, 100%, 50%)");
	gradient2.addColorStop(1 / 3, "hsl(120, 100%, 50%)");
	gradient2.addColorStop(0.5, "hsl(180, 100%, 50%)");
	gradient2.addColorStop(2 / 3, "hsl(240, 100%, 50%)");
	gradient2.addColorStop(5 / 6, "hsl(300, 100%, 50%)");
	gradient2.addColorStop(1, "hsl(360, 100%, 50%)");
	context2.fillStyle = gradient2;
	context2.fillRect(0, 0, canvas2.width, canvas2.height);
	let picker2 = document.createElement('div');
	picker2.id = 'color-picker-line-picker';
	let container = document.createElement('div');
	container.id = 'color-picker-line-container';
	game.append(container);
	container.append(picker2);
	container.style.width = '35px';
	container.style.height = canvas2.height + 'px';
	picker2.style.display = 'none';
	picker2.onmousedown = container.onmousedown = canvas2.onmousedown = function(event) {
		function movePicker2(event) {
			event.preventDefault()
			picker2.style.display = '';
			let picker2Style = getComputedStyle(picker2);
			let canvas2Y = parseInt(getComputedStyle(canvas2).top);
			let coordinate = clamp(event.pageY, canvas2Y, canvas2Y + canvas2.height);
			picker2.style.top = coordinate - 10 - parseInt(picker2Style.height) / 2 + 'px';
		}
		movePicker2(event);
		container.addEventListener('mousemove', movePicker2);
		canvas2.addEventListener('mousemove', movePicker2);
		game.addEventListener('mousemove', movePicker2);
		document.body.onmouseup = function() {
			container.removeEventListener('mousemove', movePicker2);
			canvas2.removeEventListener('mousemove',...