JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        #c{z-index:9}
        #c,#d{position:relative}
        #d{background-color:#111;margin-top:-150px;z-index:999999;}
    </style>
    <script type="text/javascript">
        function load() {
            var c = document.getElementById("c").getContext("2d");
            c.fillStyle = "rgba(255, 200, 200, 1)";
            c.fillRect(0, 0, c.canvas.width, c.canvas.height);
        }
    </script>
</head>
<body onload="load()">
<div id>
    <canvas style="position: absolute; left: 0px; top: 0px; width:100%; height:100%; background-color: yellow;">
        abcd
    </div>
    <div style="position: absolute; z-index: 1; left: 0px; top: 0px; width:100px; height:20px; background-color: green;">
        1234
    </div>
</div>
</body>
</html>