JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Calculator</title>
</head>
<body>
<form name="calc" id="calc" action="calculator.js">
<table>
<tr>
<td colspan="4"><input type="text" name="display" id="display" value="123" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="butce" id="ce" class="button" value="CE" /></td>
<td colspan="2"><input type="button" name="butca" id="ca" class="button" value="CA" /></td>
</tr>
<tr>
<td><input type="button" name="button" id="butplusmin" class="button" value="±" /></td>
<td><input type="button" name="button" id="butdivide" class="button" value="÷" /></td>
<td><input type="button" name="button" id="buttimes" class="button" value="×" /></td>
<td><input type="button" name="button" id="butmin" class="button" value="-" /></td>
</tr>
<tr>
<td><input type="button" name="button" id="but7" class="button" value="7" /></td>
<td><input type="button" name="button" id="but8" class="button" value="8" /></td>
<td><input type="button" name="button" id="but9" class="button" value="9" /></td>
<td rowspan="2" height="51px"><input type="button" name="button" id="Button7" class="button" value="+" /></td>
</tr>
<tr>
<td><input type="button" name="button" id="but4" class="button" value="4" /></td>
<td><input type="button" name="button" id="but5" class="button" value="5" /></td>
<td><input type="button" name="button" id="but6" class="button" value="6" /></td>
</tr>
<tr>
<td><input type="button" name="button" id="but1" class="button" value="1" /></td>
<td><input...
CSS
table {
border: groove;
}
td {
border: outset;
padding: 0px;
}
.button {
width: 100%;
height: 100%;
}
#display {
background-color: #ff9595;
text-align: right;
}