JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <script>


  </script>
  <form name="taschenrechner" id="calculator">
    <table>
      <tr>
        <td>
          <input type="text" id="input" name="input" size="16" class="display">
        </td>
      </tr>
      <tr>
        <td class="buttons">

          <input type="button" name="ein" value="1" OnClick="addInput(1)">
          <input type="button" name="zwei" value="2" OnClick="addInput(2)">
          <input type="button" name="drei" value="3" OnClick="addInput(3)">
          <input type="button" name="add" value="+" onclick="addOperator('+')">
          <br>
          <input type="button" name="vier" value="4" OnClick="addInput(4)">
          <input type="button" name="funf" value="5" OnClick="addInput(5)">
          <input type="button" name="sechs" value="6" OnClick="addInput(6)">
          <input type="button" name="sub" value="-" OnClick="addOperator('-')">
          <br>
          <input type="button" name="sieben" value="7" OnClick="addInput(7)">
          <input type="button" name="acht" value="8" OnClick="addInput(8)">
          <input type="button" name="neun" value="9" OnClick="addInput(9)">
          <input type="button" name="zehn" value="x" OnClick="addOperator('*')">
          <br>
          <input type="button" name="clear" value="c" onClick="clear()">
          <input type="button" name="null" value="0" OnClick="addInput(0)">
          <input type="button" name="macht" value="=" OnClick="calc()">
          <input type="button" name="div" value="/" OnClick="addOperator('/')">
        </td>
      </tr>
    </table>

  </form>

CSS

@charset "utf-8";

/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: bold 14px Arial, sans-serif;
}

html {
  height: 100%;
  background: white;
  background: radial-gradient(circle, #fff 20%, #ccc);
  background-size: cover;
}

#calculator * {
  font-size: 20px;
}

#calculator table {
  border: solid 3px silver;
  border-spacing: 3px;
  background-color: #EEE;
}

#calculator table td {
  border-spacing: 3px;
}

#calculator table {
  margin: 100px auto;
}

input.display {
  width: 275px;
  height: 40px;
  text-align: right;
}

td.buttons {
  border-top: solid 1px silver;
}

input[type=button] {
  width: 65px;
  height: 50px;
}

</style>

JavaScript

var input = document.getElementById('input'),
    	  a = [0, 0],
    	  c = false,
    	  operator = '';

    	function addInput(x) {
    	  input.value += x;
    	  if (!c)
    	    a[0] = a[0] * 10 + +x;
    	  else
    	    a[1] = a[1] * 10 + +x;
    	}

    	function addOperator(x) {
    	  if (c)
    	    calc();
    	  c = true;
    	  operator = x;
    	  input.value += x;
    	}

    	function calc() {
    	  if (operator === '')
    	    return;
    	  switch (operator) {
    	    case '+':
    	      a[0] = a[0] + a[1];
    	      break;
    	    case '*':
    	      a[0] = a[0] * a[1];
    	      break;
    	    case '/':
    	      a[0] = a[0] / a[1]
    	      break;
    	    case '-':
    	      a[0] = a[0] - a[1];
    	      break;
    	  }
    	  operator = '';
    	  a[1] = 0;
    	  input.value = (a[0]).toFixed(6);
    	}

    	function clear() {
    	  a = [0, 0];
    	  c = false;
    	  operator = '';
    	  input.value = '';
    	}