JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
	<title>Blah</title>
	<link rel="stylesheet" type="text/css" href="Style.css">
</head>

<body>

	<canvas id="canvas0" width=800 height=600></canvas>
    <canvas id="canvas1" width=800 height=600></canvas>
    <canvas id="canvas2" width=800 height=600></canvas>
    <canvas id="canvas3" width=800 height=600></canvas>
    <div class='buttonContainer'>
        <input class='but' id='but1' type='button' value='Button 1'>
        <input class='but' id='but2' type='button' value='Button 2'>
        <input class='but' id='but3' type='button' value='Button 3'>
        <input class='but' id='but4' type='button' value='Button 4'>
    </div>

</body>

</html>

CSS

#canvas0,  #canvas1, #canvas2, #canvas3 {
    position: absolute;
    border: 2px solid;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

.buttonContainer{
   position: relative;
    top: 40%;
    left:45%;
    width:80px;
}
.class='but' {
    float:left;
}


#canvas0 {
    z-index: 0;
}

#canvas1 {
    z-index: 1;
}

#canvas2 {
    z-index: 2;
}

#canvas3 {
    z-index: 3;
}