JSFiddle - React, Tailwind, and code Playground

HTML

<span id="display"></span>
<br/>
<button id="c">C</button>
<button id="0">0</button>
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
<button id="4">4</button>
<button id="5">5</button>
<button id="6">6</button>
<button id="7">7</button>
<button id="8">8</button>
<button id="9">9</button>
<button id="operator_*">*</button>
<button id="operator_/">/</button>
<button id="operator_.">.</button>
<button id="operator_-">-</button>
<button id="operator_+">+</button>
<button id="operator_=">=</button>

CSS

#display {
    border:1px solid #ccc;
    width:200px;
    height:20px;
    display:block;
}

JavaScript

function setup() {
    var i;
    for (i = 0; i <= 9; i++) {
        document.getElementById(i).onclick = handleInput;
        document.getElementById("operator_*").onclick = handleInput;
        document.getElementById("operator_/").onclick = handleInput;
        document.getElementById("operator_.").onclick = handleInput;
        document.getElementById("operator_-").onclick = handleInput;
        document.getElementById("operator_+").onclick = handleInput;

        //var x;
        document.getElementById("operator_=").onclick = evaluateInput;
        document.getElementById("c").onclick = clearInput;
    }
}

function handleInput(e) {
    var s = document.getElementById("display");
    s.innerHTML += e.srcElement.childNodes[0].nodeValue;
}

function evaluateInput(e) {
    var s = document.getElementById("display");
    s.innerHTML = eval(document.getElementById("display").childNodes[0].nodeValue);
}

function clearInput(e) {
    var s = document.getElementById("display");
    s.innerHTML = null;
}

setup();