JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
            <label>WEB Calculator</label>
            <table>
                <tbody><tr>
                    <td colspan="5"><input id="inout"></td>
                </tr>
                <tr>
                    <td><button onclick="delAll()">c</button></td>
                    <td><button onclick="del()">del</button></td>
                    <td><button onclick="modifyInout('(')">(</button></td>
                    <td><button onclick="modifyInout(')')">)</button></td>
                    <td><button onclick="modifyInout('√')">√</button></td>
                </tr>
                <tr>
                    <td><button onclick="modifyInout('7')">7</button></td>
                    <td><button onclick="modifyInout('8')">8</button></td>
                    <td><button onclick="modifyInout('9')">9</button></td>
                    <td><button onclick="modifyInout('^')">X<sup>y</sup></button></td>
                    <td class="fix" rowspan="2"><button onclick="modifyInout('+')">+</button></td>
                </tr>
                <tr>
                    <td><button onclick="modifyInout('4')">4</button></td>
                    <td><button onclick="modifyInout('5')">5</button></td>
                    <td><button onclick="modifyInout('6')">6</button></td>
                    <td><button onclick="modifyInout('-')">-</button></td>
                </tr>
                <tr>
                    <td><button onclick="modifyInout('1')">1</button></td>
                    <td><button onclick="modifyInout('2')">2</button></td>
                    <td><button onclick="modifyInout('3')">3</button></td>
                    <td><button onclick="modifyInout('*')">*</button></td>
                    <td class="fix" rowspan="2"><button onclick="compute()">=</button></td>
                </tr>
                <tr>
                    <td><button onclick="modifyInout('0')">0</button></td>
                    <td colspan="2"><button...

CSS

body {
    background: none repeat scroll 0 0 #3A5C2B;
}
label {
    font-family: Harlow Solid Italic,forte,arial;
}
p {
    font-family: forte,arial;
    width: 500px;
}
td {
    height: 35px;
    margin: 0;
    width: 35px;
}
table {
}
.left {
    float: left;
}
.right {
    float: right;
}
#inout {
    height: 100%;
    width: 98%;
}
#main {
    background: none repeat scroll 0 0 #DDDDDD;
    border-radius: 5px 5px 5px 5px;
    height: 100%;
    margin: auto;
    padding: 5px;
    width: 197px;
}
#main button {
    float: left;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

.fix {
    height: 70px;
}