JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td colspan="3" id="disp">0</td>
    <td><button onclick="clear();">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="number("7");">0</button></td>
    <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() {
	var disp = document.getElementById('disp');
	disp.innerHTML = "80085";
}