JSFiddle - React, Tailwind, and code Playground

HTML

<title>Calculator</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js">
    
</script>
<title>Calculator</title>
<body>
    <div id="page">
        <div id="calculator"></div>
        <input type="text" class="display" id="display" readonly />
        <button type="button" class="clear" id="ce" value="CE">CE</button>
        <br>
        <br>
        <p></p>
        <button href="#" type="button" class="number" id="one" value="1">1</button>
        <button href="#" type="button" class="number" id="two" value="2">2</button>
        <button href="#" type="button" class="number" id="three" value="3">3</button>
        <button href="#" type="button" class="function" id="add" value="+">+</button>
        <button href="#" type="button" class="function" id="multi" value="x">x</button>
        <p></p>
        <button href="#" type="button" class="number" id="four" value="4">4</button>
        <button href="#" type="button" class="number" id="five" value="5">5</button>
        <button href="#" type="button" class="number" id="six" value="6">6</button>
        <button href="#" type="button" class="function" id="sub" value="-">-</button>
        <button href="#" type="button" class="function" id="divide" value="/">/</button>
        </p>
        <button href="#" type="button" class="number" id="seven" value="7">7</button>
        <button href="#" type="button" class="number" id="eight" value="8">8</button>
        <button href="#" type="button" class="number" id="nine" value="9">9</button>
        <button href="#" type="button" class="number" id="zero" value="0">0</button>
        <button href="#" type="button" class="clear" id="clear" value="C">C</button>
        <br></br>
        <button type="button" class="equal" id="equ" value="=">=</button>
    </div>
    </div>
</body>

</html>

CSS

#page {
    border: 5px solid #a1a1a1;
    padding: 20px 25px;
    background: #0174DF;
    width: 270px;
    border-radius: 30px;
    centre;
}
.number {
    width: 50px;
    height: 40px;
    font-size: 20px;
    background: #0B0719;
    color: #D8F6CE;
    font-family:"Times New Roman";
}
.function {
    width: 50px;
    height: 40px;
    font-size: 25px;
    font-weight: bold;
}
.clear {
    width: 50px;
    height: 40px;
    font-size: 39px;
}
.equal {
    width: 200px;
    height: 40px;
    font-size: 40px;
}
.clear {
    font-size: 25px;
    color:#FF0000;
    font-weight: bolder;
}
#display {
    width: 200px;
    height: 30px;
    text-align: center;
    background:#D8F781;
}

JavaScript

$(function () {
    var $show = $('#display');
    var currentDisplay = "";

    $show.val(0);


    $(document).on('click', 'button.number', function () {
            
        if ($show.val().length >= 8) {
            $show.val("Error");
        } else if ($show.val() == "Error") {
            $show.val("0");
        } else if ($.inArray($show.val(),['+','-','x','/']) !== -1) {       
            var addOp = $show.val();
            if (addOp) memory.push(addOp);
            $show.val($(this).val());
        } else {
            $show.val(($show.val() == "0" ? "" : $show.val()) + $(this).val());

        }
    });
    $("#clear").click(function () {
        $show.val("0");
    });
    $("#ce").click(function () {
        if ($show.val().length >= 2) {
            $show.val($show.val().substring(0, $show.val().length - 1));
        } else {
            $("#ce").trigger("click");
        }
    });
    var memory = [];

   $(document).on('click', 'button.function', function () {
        var addnum = $show.val();
        if (addnum) memory.push(addnum);
        $show.val($(this).val());
    });
    $('#equ').click(function () {
        var addnum = $show.val();
        memory.push(addnum);
        /*
        $.post("calculation.php", {
            execute: memory
        }, function (data,status) {
            $show.val(e);
            var e = memory.join('');
            memory = [];

        });
        */
        //code in javascript to mimic php
        var total = parseInt(memory[0]);
        for(i=1;i<memory.length;i+=2){
            	switch(memory[i]){
                        case "+": total += parseInt(memory[i+1]);
                        break;
                        case '-': total -= parseInt(memory[i+1]);
                        break;
                        default : total += parseInt(memory[i+1]);
            	}
        }
        $show.val(total);
    });
});