JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Test</title>
<script type="text/javascript">
  function draw () {

    var displayHeight = 200;
    var displayWidth = 100;
    var container = document.getElementById("container");

    var Canvas = {
        meterOne  : CreateRectCanvasElement (displayWidth/2,displayHeight/10*8),
        meterTwo  : CreateRectCanvasElement (displayWidth/2,displayHeight/10*8),
        buttonCommit: CreateButtonElement (displayWidth,displayHeight/10*2)
    };

     Canvas.buttonCommit.type="button";
     Canvas.buttonCommit.style.top = 0;

    container.appendChild (Canvas.buttonCommit);
    container.appendChild (document.createElement("br"));
    container.appendChild (Canvas.meterOne);
    container.appendChild (Canvas.meterTwo);


  }

  function CreateRectCanvasElement(width, height)
  {
    var canvas = document.createElement('canvas');
    canvas.style.position = 'relative';
    canvas.style.border = '1px solid black';

    canvas.width = width;
    canvas.height= height;


    return canvas;
  }

  function CreateButtonElement(width,height)
  {
    var element = document.createElement('button');
    element.style.width = width + 'px';
    element.style.height = height+ 'px';
    
    return element;
  }
</script>
</head>

<body onload="draw()">
<div id="container"></div>
</body>
</html>