JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <div id="screen">0</div>
        <div class="keys">m+</div>
        <div class="keys">m-</div>
        <div class="keys">mr</div>
        <div class="keys operator">%</div>
        <div class="keys numpad">7</div>
        <div class="keys numpad">8</div>
        <div class="keys numpad">9</div>
        <div class="keys operator">x</div>
        <div class="keys numpad">4</div>
        <div class="keys numpad">5</div>
        <div class="keys numpad">6</div>
        <div class="keys operator">+</div>
        <div class="keys numpad">1</div>
        <div class="keys numpad">2</div>
        <div class="keys numpad">3</div>
        <div class="keys operator">-</div>
        <div class="keys numpad">0</div>
        <div class="keys numpad">.</div>
        <div class="keys" id="clear">C</div>
        <div class="keys" id="equals">=</div>
    </div>
    <footer>
        <p>Simple calculator created by <a href="https://github.com/Jberczel" target="_blank">@jberczel</a>

        </p>
        <p>Design based on <a href="http://www.cultofmac.com/188753/the-braun-products-that-inspired-apples-iconic-designs-gallery/" target="_blank">iPhone tribute to 1977 Braun calculator</a>

        </p>
        <p><a href="https://github.com/Jberczel/odin-javascript/tree/master/calculator" target="_blank">[Source Code]</a>

        </p>
    </footer>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="calculator.js"></script>
</body>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font: bold 18px Helvetica, Arial, sans-serif;
    background: #F1F1F1;
}
.container {
    background: #1E1E1E;
    border-radius: 10px;
    margin: 60px auto;
    overflow:hidden;
    padding: 10px;
    width: 200px;
}
.keys {
    background: -webkit-linear-gradient(#8D9194, #51585E);
    background: -moz-linear-gradient(#8D9194, #51585E);
    background: linear-gradient(#8D9194, #51585E);
    border: 1px solid #282828;
    border-radius: 50%;
    color: #F7F7F7;
    cursor: pointer;
    float:left;
    margin: 5px 0px;
    margin-right: 5px;
    padding: 10px 5px;
    text-align: center;
    width:40px;
}
.numpad {
    background: -webkit-linear-gradient(#4B4B4B, #1E1E1E);
    background: -moz-linear-gradient(#4B4B4B, #1E1E1E);
    background: linear-gradient(#4B4B4B, #1E1E1E);
    color: #F7F7F7;
}
.operator {
    color: #F7F7F7;
    background: -webkit-linear-gradient(#9B8E88, #645447);
    background: -moz-linear-gradient(#9B8E88, #645447);
    background: linear-gradient(#9B8E88, #645447);
}
#screen {
    background: #D4DAB6;
    border: 1px solid #282828;
    border-radius: 5px;
    font-size: 27px;
    line-height: 36px;
    margin: 10px auto;
    padding-right: 10px;
    text-align: right;
}
#clear {
    color: #F7F7F7;
    background: -webkit-linear-gradient(#9B8E88, #645447);
    background: -moz-linear-gradient(#9B8E88, #645447);
    background: linear-gradient(#9B8E88, #645447);
}
#equals {
    background: -webkit-linear-gradient(#FCB577, #F37C18);
    background: -moz-linear-gradient(#FCB577, #F37C18);
    background: linear-gradient(#FCB577, #F37C18);
}
.keys:hover, #clear:hover, #equals:hover {
    background: #fff;
    color: #648880;
}

JavaScript

var num1 = [],
    num2 = [],
    operand = null,
    solved = false,
    $screen = $("#screen");


$(".numpad").click(function () {
    var input = $(this).html();

    if (solved) {
        clear();
    }

    if (!operand) {
        num1.push(input);
        $screen.html(num1.join(''));
    } else {
        num2.push(input);
        $screen.html(num1.join('') + operand + num2.join(''));
    }

    $(this).fadeOut(100).fadeIn(100);
});


$(".operator").click(function () {
    var input = $(this).html();

    // conditional allows users to keep computing numbers off last result
    if (solved) {
        num2 = [];
        operand = null;
        solved = false;
    }
    setOperand(input);
    $(this).fadeOut(100).fadeIn(100);
});


$('#clear').click(function () {
    clear();
    $(this).fadeOut(100).fadeIn(100);
});


$("#equals").click(function () {
    if (num1 && num2 && operand) {

        var n1 = +num1.join(''),
            n2 = +num2.join(''),
            result = null;

        switch (operand) {
            case '+':
                result = n1 + n2;
                break;
            case '-':
                result = n1 - n2;
                break;
            case '*':
                result = n1 * n2;
                break;
            case '/':
                result = n1 / n2;
                break;
        }

        $screen.html(formatNum(result));
        num1 = [result]; //user can keep hitting 'enter' to continue calculations.
        num2 = [n2];
        solved = true;
    }
    $(this).fadeOut(100).fadeIn(100);
});

//
function setOperand(symbol) {
    if (!operand) {
        operand = symbol.replace("x", "*").replace("%", "/");
        $screen.html(num1.join('') + operand);
    }
}

function clear() {
    num1 = [];
    num2 = [];
    operand = null;
    solved = false;
    $screen.html(0);
}

function formatNum(num) {
    return (num % 1 === 0) ? num : num.toFixed(4);
}