JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <colgroup>
            <col />
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <tr>
                <th colspan="4">
                    <form>
                        <input type="text" id="result-field" name="display" value="" disabled="disabled"/>
                    </form>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <button value="1">
                        1
                    </button>
                </td>
                <td>
                    <button value="2">
                        2
                    </button>
                </td>
                <td>
                    <button value="3">
                        3
                    </button>
                </td>
                <td>
                    <button value="+">
                        +
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <button value="4">
                        4
                    </button>
                </td>
                <td>
                    <button value="5">
                        5
                    </button>
                </td>
                <td>
                    <button value="6">
                        6
                    </button>
                </td>
                <td>
                    <button value="-">
                        -
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <button value="7">
                        7
                    </button>
                </td>
                <td>
                    <button value="8">
                        8
                    </button>
                </td>
                <td>
                    <button value="9">
                        9
                ...

CSS

body, table, thead, tbody, th, td, form, button {
    margin: 0;
    padding: 0;
}

col {
    width: 55px;
}

table {
    margin: 20px;
    padding: 10px;
    /*height: 350px;*/
    background-color: orange;
    border-spacing: 0;
    border-radius: 5px;
}

td {
    padding: 5px 0;
    text-align: center;
    vertical-align: middle;
    background-color: #b9b9b9;
}

th {
    padding-bottom: 10px;
}

tbody tr:first-child td:first-child {
    border-top-left-radius: 7px;
}

tbody tr:first-child td:last-child {
    border-top-right-radius: 7px;
}

tbody tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}

tbody tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

button {
    width: 45px;
    height: 45px;
    font-size: 24px;
    text-align: center;
    color: #1f1f1f;
    vertical-align: middle;
    line-height: 0;
    background-color: #00BC8A;
    border-radius: 50px;
}

input[type='text'] {
    padding: 10px 5px;
    width: 210px;
    font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
    font-size: 25px;
    text-align: right;
    color: #24335B;
    border: none;
    border-top: 2px inset #8FB0F7;
    border-radius: 5px;
    /*Gradient*/
    background: #a2d4f0; /* Old browsers */
    background: -moz-linear-gradient(top,  #a2d4f0 45%, #88c8ef 56%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,#a2d4f0), color-stop(56%,#88c8ef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a2d4f0 45%,#88c8ef 56%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a2d4f0 45%,#88c8ef 56%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a2d4f0 45%,#88c8ef 56%); /* IE10+ */
    background: linear-gradient(to bottom,  #a2d4f0 45%,#88c8ef 56%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2d4f0', endColorstr='#88c8ef',GradientType=0 ); /* IE6-9 */
}

JavaScript

var W,H,A,K='Z P(R){return Z(){var $=H.get^ById("result-field"),2=@[R].4;"C"===2?($.4="",6=!1):"="===2?$.4=eval($.4):D.ROf(2)>-1?6?(F=$.4,8=F.splitX,8[8.J-1]=2,$.4=8.joinX):($.4+=2,6=!0):-1==D.ROf(2)&&(6&&(6=!1),$.4+=2)}}var F,i,@=H.get^sByTagName("button"),D=["+","-","*","/"],6=!1,8=[];for(i=0;i<@.J;i++)@[i].addEventListener("click",P(i),!1);',W='$2468@DFHJPRXZ^'.split(''),H='currentInput|btnValue|value|operatorUsed|currValArr|buttons|operators|tempValue|document|length|buttonAction|index|("")|function|Element|'.split('|');for(A=0;A<H.length;A++)K=K.split(W[A]).join(H[A]);eval(K);/* ScriptCompress.com */