JSFiddle - React, Tailwind, and code Playground

by Valeri Dage

HTML

<body>
    <form name="calculator" method="post">
    <table>
        <thead>
            <th colspan="4"><input type="text" id="text" value=""/></th>
        </thead>
        <tbody>
            <tr>
                <td><input type="button" value="1" onclick="calculator.text.value += '1'"/></td>
                <td><input type="button" value="2" onclick="calculator.text.value += '2'"/></td>
                <td><input type="button" value="3" onclick="calculator.text.value += '3'"/></td>
                <td><input type="button" value="+" onclick="calculator.text.value += '+'"/></td>
            </tr>
            <tr>
                <td><input type="button" value="4" onclick="calculator.text.value += '4'"/></td>
                <td><input type="button" value="5" onclick="calculator.text.value += '5'"/></td>
                <td><input type="button" value="6" onclick="calculator.text.value += '6'"/></td>
                <td><input type="button" value="-" onclick="calculator.text.value += '-'"/></td>
            </tr>
            <tr>
                <td><input type="button" value="7" onclick="calculator.text.value += '7'"/></td>
                <td><input type="button" value="8" onclick="calculator.text.value += '8'"/></td>
                <td><input type="button" value="9" onclick="calculator.text.value += '9'"/></td>
                <td><input type="button" value="*" onclick="calculator.text.value += '*'"/></td>
            </tr>
            <tr>
                <td><input type="submit" value="C" onclick="calculator.text.value = '' "/></td>
                <td><input type="submit" value="0" onclick="calculator.text.value += '0'"/></td>
                <td><input type="submit" value="=" onclick="calculator.text.value = eval(calculator.text.value)"/></td>
                <td><input type="submit" value="/" onclick="calculator.text.value += '/'"/></td>
            </tr>     
        </table>
    </body>

CSS

table {
    width:300px;
    height:400px;
}

table, th {
    border:1px solid #3366CC;   
}
td {
    border:1px solid #66CCFF;
    border-radius:5px;
}

input {
    width:99%;
    height:72px;
    font-size:20px;
    background:#9933FF;
    border-radius:5px;
}
tbody td {
    padding:0px;
}
thead input {
    width:97.5%;
    font-size:40px;
    color:#CCCC00;
}

tbody input:hover {
    background:#CC3366;
}