JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<FORM NAME="Calc">
<TABLE >
<TR>
<TD>
<input class="text" id="Input" type="text" onkeypress="if(event.keyCode == 13){calculate();return false;}"   NAME="Input" Size="16">
<br>
</TD>
</TR>
<TR>
<TD>
<input class="button" type="button" NAME="one"   VALUE=" 1 " OnClick="Calc.Input.value += '1';setFocus();">
<input class="button" type="button" NAME="two"   VALUE=" 2 " OnCLick="Calc.Input.value += '2';setFocus();">
<input class="button" type="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value += '3';setFocus();">
<input style="width:40px" class="button" type="button" NAME="plus"  VALUE="+" OnClick="Calc.Input.value += ' + ';setFocus();">
<br>
<input class="button" type="button" NAME="four"  VALUE=" 4 " OnClick="Calc.Input.value += '4';setFocus();">
<input class="button" type="button" NAME="five"  VALUE=" 5 " OnCLick="Calc.Input.value += '5';setFocus();">
<input class="button" type="button" NAME="six"   VALUE=" 6 " OnClick="Calc.Input.value += '6';setFocus();">
<input class="button" type="button" NAME="minus" VALUE="-" OnClick="Calc.Input.value += ' - ';setFocus();">
<br>
<input class="button" type="button" NAME="seven" VALUE=" 7 " OnClick="Calc.Input.value += '7';setFocus();">
<input class="button" type="button" NAME="eight" VALUE=" 8 " OnCLick="Calc.Input.value += '8';setFocus();">
<input class="button" type="button" NAME="nine"  VALUE=" 9 " OnClick="Calc.Input.value += '9';setFocus();">
<input class="button" type="button" NAME="times" VALUE="x" OnClick="Calc.Input.value += ' * ';setFocus();">
<br>
<input class="button" type="button" NAME="clear" VALUE=" c " OnClick="Calc.Input.value = '';setFocus();">
<input class="button" type="button" NAME="zero"  VALUE=" 0 " OnClick="Calc.Input.value += '0';setFocus();">
<input class="button" type="button" NAME="DoIt"  VALUE="=" OnClick="calculate();;setFocus();">
<input class="button" type="button" NAME="div"   VALUE=" / " OnClick="Calc.Input.value += ' / ';setFocus();">
<br>
<input class="button2" type="button"...

CSS

.button {
    width:40px;
}
.button2 {
    width:32px;
    font-size:10px;
}

JavaScript

function calculate() {
    var input = Calc.Input.value;
    input = input.replace(/cos/gi, 'Math.cos');
    input = input.replace(/tan/gi, 'Math.tan');
    input = input.replace(/sin/gi, 'Math.sin');
    input = input.replace(/arcMath\./gi, 'Math.a');
    input = input.replace(/abs/gi, 'Math.abs');
    input = input.replace(/pi/gi, 'Math.PI');
    input = input.replace(/pow/gi, 'Math.pow');
    input = input.replace(/sqrt/gi, 'Math.sqrt');
    input = input.replace(/log/gi, 'Math.log');

    try {
        Calc.Input.value = eval(input);
    }
    catch (e) {
        if (e.message == 'Unexpected end of input') {
            Calc.Input.value += ')';
            calculate();
        }
        else {
            Calc.Input.value = 'Error: ' + e.message;
        }
    }
}

function setFocus() {
    Calc.Input.focus();
}