JSFiddle - React, Tailwind, and code Playground

HTML

<div class='calculator'>
    <div id='result'>0</div>
    <table id='buttons'>
        <tr><td><div id='MC'>MC</div></td><td><div id='M-plus'>M+</div></td><td><div id='M-minus'>M-</div></td><td><div id='MR'>MR</div></td></tr>
        <tr><td><div id='clear'>C</div></td><td><div id='positive-negative'>±</div></td><td><div class='operator'>/</div></td><td><div class='operator'>x</div></td></tr>
        <tr><td><div class='number'>7</div></td><td><div class='number'>8</div></td><td><div class='number'>9</div></td><td><div class='operator'>-</div></td></tr>
        <tr><td><div class='number'>4</div></td><td><div class='number'>5</div></td><td><div class='number'>6</div></td><td><div class='operator'>+</div></td></tr>
        <tr><td><div class='number'>1</div></td><td><div class='number'>2</div></td><td><div class='number'>3</div></td><td rowspan='2'><div id="equals">=</div></td></tr>
        <tr><td colspan='2'><div class='number'>0</div></td><td><div id='point'>.</div></td></tr>
    </table>
</div>

CSS

html {
    background: black;
}

.calculator {
    box-shadow: 0 1px 0 #fcfbf9 inset, 0 10px 15px #458493;
    position:fixed;
    top: 50%;
    left: 50%;
    width: 18em;
    height: 24em;
    border-radius: 10px;
    margin-top: -12em; /*set to a negative number 1/2 of your height*/
    margin-left: -9em; /*set to a negative number 1/2 of your width*/
    border: 2px solid orange;
    /* START bg color */
    background: -moz-linear-gradient(cyan, gray);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00FFFF), color-stop(100%, #808080));
    background: -webkit-linear-gradient(cyan, gray);
    background: -o-linear-gradient(cyan, gray);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#808080');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#808080')";
    background: linear-gradient(cyan, gray);
    /* END bg color */
}

#result {
    border-radius: 5px;
    border: 1px solid black;
    /* START bg color */
    background: -moz-linear-gradient(#dad3c7, #f5f2ec);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dad3c7), color-stop(100%, #f5f2ec));
    background: -webkit-linear-gradient(#dad3c7, #f5f2ec);
    background: -o-linear-gradient(#dad3c7, #f5f2ec);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dad3c7', endColorstr='#f5f2ec');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dad3c7', endColorstr='#f5f2ec')";
    background: linear-gradient(#dad3c7, #f5f2ec);
    /* END bg color */
    font-family: "Cambria";
    width: 16em;
    height: 1.5em;
    position: relative;
    margin-left: 1em;
    margin-top: 1em;
    text-align: right;
}

#buttons {
    position: relative;
    margin-top: 1em;
    margin-left: 1em;
    width: 16em;
    height: 19.5em;
    text-align: center;
}

#buttons td div {
    font-family: "Arial";
    cursor: pointer;
   ...

JavaScript

$(document).ready(function(){
    $(".number").click(function(index){
        alert("Clicked");
        val text = $(this).text();
        if(text != '0' || $('#result').text() != '0') {
            $('#result').text().append(text);
        }
    });
});