JSFiddle - React, Tailwind, and code Playground

HTML

<header>
</header>
<main>
	<canvas id="stage"></canvas>
</main>

CSS

html,body{
			margin:0;
			width:100%;
			height:100%;
		}
		body{
			display:flex;
			flex-direction:column;
		}
header{
			width:100%;
			height:40px;
			background-color:red;
		}
		main{
			display:flex;
			flex: 1 1 auto;
			border: 1px solid blue;
			width:80vw;
		}
		canvas{
			flex: 1 1 auto;
			background-color:black;
		}

JavaScript

$( document ).ready(function() {
    var ctx = $("#stage")[0].getContext("2d");
    ctx.strokeStyle="#FFFFFF";
    ctx.beginPath();
	ctx.arc(100,100,50,0,2*Math.PI);
	ctx.stroke();
});