JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <table id="calc">
        <thead>
            <tr>
                <th colspan="4">
                    <form><input id="display" type="text" placeholder="0" autofocus onkeyup="searchKeyPress(event)"/></form>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><button onclick="calculate(1)">1</button></td>
                <td><button onclick="calculate(2)">2</button></td>
                <td><button onclick="calculate(3)">3</button></td>
                <td><button onclick="calculate('+')">+</button></td>
            </tr>
            <tr>
                <td><button onclick="calculate(4)">4</button></td>
                <td><button onclick="calculate(5)">5</button></td>
                <td><button onclick="calculate(6)">6</button></td>
                <td><button onclick="calculate('-')">-</button></td>
            </tr>
            <tr>
                <td><button onclick="calculate(7)">7</button></td>
                <td><button onclick="calculate(8)">8</button></td>
                <td><button onclick="calculate(9)">9</button></td>
                <td><button onclick="calculate('*')">*</button></td>
            </tr>
            <tr>
                <td><button onclick="calculate('clear')">C</button></td>
                <td><button onclick="calculate(0)">0</button></td>
                <td><button onclick="calculate('=')">=</button></td>
                <td><button onclick="calculate('/')">/</button></td>
            </tr>
        </tbody>
    </table>
</body>

CSS

#calc {
    width:250px;
    height: 100px;
    border: 2px solid black;
    text-align:center;
    table-layout:fixed;
    background:#c6c6c6;
    padding:5px;
}

    #calc button{
        width:50px;
        height:50px;
        font-size:25px;
    }

    #calc button:hover{
        background:#c6c6c6;
        font-weight:bold;
    }

    #display{
        width:221px;
        height:30px;
        margin:5px;
        font-size:25px;
    }

JavaScript

function calculate(input) {
    var display = document.getElementById('display').value;
    switch (input) {
        case "clear": display = "";
            break;
        case "=": display = eval(display);
            break;
        default: display += input;
            break;
    }
    document.getElementById('display').value = display;
}

function searchKeyPress(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
        calculate('=');
    }
}