JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Тестовая страница</title>
    <link rel="stylesheet" href="style.css" charset="utf-8">
  </head>
  <body>
    <div>
      <div id="string0">
        <input type="text" value="0" readonly id="io">
      </div>
      <div id="string1">
        <button id="one">1</button>
        <button id="two">2</button>
        <button id="three">3</button>
        <button id="plus">+</button>
      </div>
      <div id="string2">
        <button id="four">4</button>
        <button id="five">5</button>
        <button id="six">6</button>
        <button id="minus">-</button>
      </div>
      <div id="string3">
        <button id="seven">7</button>
        <button id="eight">8</button>
        <button id="nine">9</button>
        <button id="multiply">&#215;</button>
      </div>
      <div id="string4">
        <button id="clear">C</button>
        <button id="zero">0</button>
        <button id="equal">=</button>
        <button id="divide">&#247;</button>
      </div>
    </div>
    <script src="script.js" charset="utf-8"></script>
  </body>
</html>

CSS

button {
  width: 50px;
  height: 50px;
  font-size: 20px;
}
input {
  height: 30px;
  width: 200px;
  font-size: 20px;
  padding: 2px 4px;
  text-align: right;
}
div {
  padding: 2px;
}

JavaScript

var actionPlus = (a, b) => a + b;
var actionMinus = (a, b) => a - b;
var actionMultiply = (a, b) => a * b;
var actionDivide = (a, b) => a / b;
var action = null;
var n1 = null;
var n2 = null;
var out = null;
var reset = false;

var io = document.getElementById('io');

var printNum = function(n) {
  if (io.value == 0) {
    reset = true;
  }
  if (reset) {
    io.value = '';
    io.value = io.value + n;
    reset = false;
  } else {
    io.value = io.value + n;
  }
}

document.getElementById('zero').addEventListener('click', () => printNum(0));
document.getElementById('one').addEventListener('click', () => printNum(1));
document.getElementById('two').addEventListener('click', () => printNum(2));
document.getElementById('three').addEventListener('click', () => printNum(3));
document.getElementById('four').addEventListener('click', () => printNum(4));
document.getElementById('five').addEventListener('click', () => printNum(5));
document.getElementById('six').addEventListener('click', () => printNum(6));
document.getElementById('seven').addEventListener('click', () => printNum(7));
document.getElementById('eight').addEventListener('click', () => printNum(8));
document.getElementById('nine').addEventListener('click', () => printNum(9));

var clear = function() {
  io.value = 0;
  action = null;
}
document.getElementById('clear').addEventListener('click', clear);

function setAction(act) {
  if (action == null) {
    reset = true;
    action = act;
    n1 = Number(io.value);
  }
}

var result = function() {
  if (action != null) {
    n2 = Number(io.value);
    out = action(n1, n2);
    io.value = out;
    action = null;
    reset = true;
  }
};

document.getElementById('plus')
  .addEventListener('click', () => setAction(actionPlus));

document.getElementById('minus')
  .addEventListener('click', () => setAction(actionMinus));

document.getElementById('multiply')
  .addEventListener('click', () => setAction(actionMultiply));

document.getElementById('divide')
 ...