JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td colspan="3" id="disp">0</td>
    <td><button onclick="clear_calc();">CLR</button></td>
  </tr>

  <tr>
    <td><button onclick="number('7');">7</button></td>
    <td><button onclick="number('8');">8</button></td>
    <td><button onclick="number('9');">9</button></td>
    <td><button onclick="">/</button></td>
  </tr>

  <tr>
    <td><button onclick="number('4');">4</button></td>
    <td><button onclick="number('5');">5</button></td>
    <td><button onclick="number('6');">6</button></td>
    <td><button onclick="">*</button></td>
  </tr>

  <tr>
    <td><button onclick="number('1');">1</button></td>
    <td><button onclick="number('2');">2</button></td>
    <td><button onclick="number('3');">3</button></td>
    <td><button onclick="">-</button></td>
  </tr>

  <tr>
    <td><button onclick="">.</button></td>
    <td><button onclick="">=</button></td>
    <td><button onclick="">+</button></td>
  </tr>
</table>

CSS

table {
	border-collapse: collapse;
}

#display {
	background-color: lightgray;
}

button {
	width: 100%;
	background-color: white;
	border: 1px solid #008CBA;
	border-radius: 2px;
	transition-duration: 0.1s;
}

button:hover {
	background-color: #008CBA;
	color: white;
}

button:active {
	background-color: #007ea7;
	border: 1px solid #007ea7;
}

JavaScript

function clear_calc() {
  var disp = document.getElementById('disp');
  disp.innerHTML = "80085";
}

function number(s) {
  var disp = document.getElementById('disp');
  disp.innerHTML += s;
}