JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="container">
<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 id="menu">
<button id="button1" type="button">Start</button>
<button id="button2" type="button">Options</button>
<button id="button3" type="button">High Scores</button>
</div>
</div>
</body>
CSS
body {
background-color: rgb(63,63,63);
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
position: relative;
background: black;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
#cavas0 {z-index: 0;}
#canvas1 {z-index: 1;}
#canvas2 {z-index: 2;}
#canvas3 {z-index: 3;}
#menu {
position: relative;
width: 250px;
height: 200px;
z-index: 4;
top: 200px;
left: 275px;
}
button {
width: 200px;
height: 50px;
font-size: 20px;
position: absolute;
z-index: 5;
}
#button1 {
left: 25px;
}
#button2 {
left: 25px;
top: 75px;
}
#button3 {
left: 25px;
top: 150px;
}