JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="outer">
		<div class="middle">
			<div class="inner">
				
				<div id="title">
					<h1>Mijn week op Twitter:</h1>
				</div>

				<canvas id="canvas" width="750" height="445"> no canvas support </canvas>
				
				<div id="formtitle">
					<h2>Geef hier jouw (aantal) tweets van afgelopen week in</h2>
				</div>
				<div class="form">
					<form id="form">
						<input type="number" onInput="invullen()" min="0" max="255" id="maandag" placeholder="maandag" value="2">
						<input type="number" onInput="invullen()" min="0" max="255" id="dinsdag" placeholder="dinsdag" value="4">
						<input type="number" onInput="invullen()" min="0" max="255" id="woensdag" placeholder="woensdag" value="1">
						<input type="number" onInput="invullen()" min="0" max="255" id="donderdag" placeholder="donderdag" value="0">
						<input type="number" onInput="invullen()" min="0" max="255" id="vrijdag" placeholder="vrijdag" value="3">
						<input type="number" onInput="invullen()" min="0" max="255" id="zaterdag" placeholder="zaterdag" value="2">
						<input type="number" class="last" onInput="invullen()" min="0" max="255" id="zondag" placeholder="zondag" value="5">
					</form>
					<button onclick="drawRandomGraph()"> Geef een willekeurige waarde in</button>
				</div>
			</div>
		</div>
	</div>
</body>

CSS

*{
	margin:0;
	padding:0;
	font-family: 'montserratregular';
}
body{
	background:url('../assets/img/blue.png');
	font-size: 62.5%;
}
.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
.inner {
    width:750px;
	height:760px;
	margin-left:auto;
	margin-right:auto;
	border-radius: 5px;
	overflow:hidden;
}
#title, #formtitle{
	width:870px;
	height:45px;
	background-color:white;
	padding-top:30px;
	padding-left:30px;
	text-transform: uppercase;
}
h1, h2{
	font-size: 1.4em;
}
.form{
	width:750px;
	height:165px;
	background-color: #EDF1F4;
	padding-top:30px;
	padding-bottom:30px;
}
#form{
	width:690px;	
	overflow:auto;
	margin-left:auto;
	margin-right:auto;
}
form input{
	height:45px;
	width:94px;
	margin-right:5px;
	border:none;
	text-align: center;
	outline:none;
	float:left;
	margin-bottom:15px;

}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 

}
button{
	height:45px;
	width:690px;
	margin-left:auto;
	margin-right:auto;
	display:block;
	color:white;
	text-transform: uppercase;
	background-color: #1E2831;
	border:none;
	outline:none;
}
button:hover{
	background-color: #0084FF;

}
.last{
	margin:0;
}
form label{
	margin:0;
	padding:0;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var form = document.getElementById("form");
var data = [];
var huidigeYpos = [];
var nieuweYpos = [];
var count = [];
var snelheid = 0;

function init(){
	ctx.fillStyle="rgb(255,255,255)";
	ctx.fillRect(0,0,canvas.width,canvas.height);
	ctx.translate(0, 445);

	for(var i = 0; i < 7; i++){
		data[i] = form[i].value*30;
	}
	
	draw();
}

function draw(){
	ctx.fillStyle="rgb(255,255,255)";
	ctx.fillRect(0,0,canvas.width,-canvas.height);
	ctx.beginPath();	
	ctx.moveTo(0,0);
	for(var i = 0; i <= 750; i += 125){
		ctx.lineTo(i,-data[i/125]);
		huidigeYpos.push((data[i/125]));
	}
	if(huidigeYpos.length > 7){
		huidigeYpos.splice(0, 7);
	}
	ctx.lineTo(750,0);
	ctx.closePath();
	ctx.fillStyle="#0084FF";	
	ctx.fill();
}
	
function invullen(){
	for(var i = 0; i < 7; i++){
		data[i] = form[i].value*30;
	}
	draw();
}

function drawRandomGraph(){	

	for(var i = 0; i < 7; i++){
        form[i].value = Math.round(Math.random()*10);
		nieuweYpos.push(form[i].value*30);
	}
	if(nieuweYpos.length > 7){
		nieuweYpos.splice(0, 7);
	}
	invullen();
}

init();