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 class="number-button" id="one">1</button>
        <button class="number-button" id="two">2</button>
        <button class="number-button" id="three">3</button>
        <button class="number-button" id="plus">+</button>
      </div>
      <div id="string2">
        <button class="number-button" id="four">4</button>
        <button class="number-button" id="five">5</button>
        <button class="number-button" id="six">6</button>
        <button class="number-button" id="minus">-</button>
      </div>
      <div id="string3">
        <button class="number-button" id="seven">7</button>
        <button class="number-button" id="eight">8</button>
        <button class="number-button" id="nine">9</button>
        <button class="number-button" id="multiply">&#215;</button>
      </div>
      <div id="string4">
        <button id="clear">C</button>
        <button class="number-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');

// Added function typeNumber();
var numberButtons = document.querySelectorAll("number-button");
// end

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;
  }
}
var numButtons = {
	'zero': 0,
  'one': 1,
  'two': 2,
  'three': 3,
  'four': 4,
  'five': 5,
  'six': 6,
  'seven': 7,
  'eight': 8,
  'nine': 9
};

for (key in numButtons) {
    document.getElementById(key).addEventListener('click', ((key) => {
    	return () => printNum(numButtons[key]);
    })(key));
}

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')
  .addEventListener('click', () => setAction(actionDivide));


document.getElementById('equal');
equal.addEventListener('click', result);