JSFiddle - React, Tailwind, and code Playground

HTML

<div id="appp" />
<script>
function Calc(winId) {
	this.id=document.getElementById(winId);
  this.id.innerHTML="<table>\
			<tr>\
				<textarea readOnly rows=\"2\" col=\"30\" id=\"" + winId + "calcWindow\">\
				</textarea>\
			</tr>\
      <tr>\
        <td><button id='" + winId + "clrButton' value='C' onClick='" + winId + ".buttonPressed(this)'> C </button></td>\
        <td><button id='" + winId + "clrButton' value='*' onClick='" + winId + ".buttonPressed(this)'> * </button></td>\
        <td><button id='" + winId + "clrButton' value='/' onClick='" + winId + ".buttonPressed(this)'> / </button></td>\
        <td><button id='" + winId + "clrButton' value='A' onClick='" + winId + ".buttonPressed(this)'> AC </button></td>\
      </tr>\
      <tr>\
        <td><button id='" + winId + "clrButton' value='1' onClick='" + winId + ".buttonPressed(this)'> 1 </button></td>\
        <td><button id='" + winId + "clrButton' value='2' onClick='" + winId + ".buttonPressed(this)'> 2 </button></td>\
        <td><button id='" + winId + "clrButton' value='3' onClick='" + winId + ".buttonPressed(this)'> 3 </button></td>\
        <td><button class='button buttonH' id='" + winId + "clrButton' value='+' onClick='" + winId + ".buttonPressed(this)'> + </button></td>\
      </tr>\
      <tr>\
        <td><button id='" + winId + "clrButton' value='4' onClick='" + winId + ".buttonPressed(this)'> 4 </button></td>\
        <td><button id='" + winId + "clrButton' value='5' onClick='" + winId + ".buttonPressed(this)'> 5 </button></td>\
        <td><button id='" + winId + "clrButton' value='6' onClick='" + winId + ".buttonPressed(this)'> 6 </button></td>\
        <td><button class='button buttonH' id='" + winId + "clrButton' value='-' onClick='" + winId + ".buttonPressed(this)'> - </button></td>\
      </tr>\
      <tr>\
        <td><button id='" + winId + "clrButton' value='7' onClick='" + winId + ".buttonPressed(this)'> 7 </button></td>\
        <td><button id='" + winId + "clrButton'...

CSS

.buttonH{width:100%;}

JavaScript

function Calc(winId) {
	this.id=document.getElementById(winId);
  this.id.innerHTML="<table>\
			<tr>\
				<textarea readOnly rows=\"2\" col=\"30\" id=\"" + winId + "calcWindow\">\
				</textarea>\
			</tr>\
      <tr>\
        <td><button id='" + winId + "clrButton' value='C' onClick='" + winId + ".buttonPressed(this)'> C </button></td>\
        <td><button id='" + winId + "clrButton' value='*' onClick='" + winId + ".buttonPressed(this)'> * </button></td>\
        <td><button id='" + winId + "clrButton' value='/' onClick='" + winId + ".buttonPressed(this)'> / </button></td>\
        <td><button id='" + winId + "clrButton' value='A' onClick='" + winId + ".buttonPressed(this)'> AC </button></td>\
      </tr>\
      <tr>\
        <td><button id='" + winId + "clrButton' value='1' onClick='" + winId + ".buttonPressed(this)'> 1 </button></td>\
        <td><button id='" + winId + "clrButton' value='2' onClick='" + winId + ".buttonPressed(this)'> 2 </button></td>\
        <td><button id='" + winId + "clrButton' value='3' onClick='" + winId + ".buttonPressed(this)'> 3 </button></td>\
        <td><button class='button buttonH' id='" + winId + "clrButton' value='+' onClick='" + winId + ".buttonPressed(this)'> + </button></td>\
      </tr>\
      <tr>\
        <td><button id='" + winId + "clrButton' value='4' onClick='" + winId + ".buttonPressed(this)'> 4 </button></td>\
        <td><button id='" + winId + "clrButton' value='5' onClick='" + winId + ".buttonPressed(this)'> 5 </button></td>\
        <td><button id='" + winId + "clrButton' value='6' onClick='" + winId + ".buttonPressed(this)'> 6 </button></td>\
        <td><button class='button buttonH' id='" + winId + "clrButton' value='-' onClick='" + winId + ".buttonPressed(this)'> - </button></td>\
      </tr>\
      <tr>\
        <td><button id='" + winId + "clrButton' value='7' onClick='" + winId + ".buttonPressed(this)'> 7 </button></td>\
        <td><button id='" + winId + "clrButton' value='8' onClick='" + winId +...