JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>

<body>
    <div id="container">
        <input id="display"value="0">
        <button id="btnClr"class="white no-left">C</button>
        <button id="btnBck"class="white">←</button>
        <button id="btnDiv"class="orange">÷</button>
        <button id="btnMul"class="orange">×</button>
        <button id="btnSub"class="orange">-</button>
        <button id="btnSum"class="orange">+</button>
        <button id="btnEql"class="orange">=</button>
        <button id="btn1"class="white no-left">1</button>
        <button id="btn2"class="white">2</button>
        <button id="btn3"class="white">3</button>
        <button id="btn4"class="white no-left">4</button>
        <button id="btn5"class="white">5</button>
        <button id="btn6"class="white">6</button>
        <button id="btn7"class="white no-left">7</button>
        <button id="btn8"class="white">8</button>
        <button id="btn9"class="white">9</button>
        <button id="btn0"class="white no-left">0</button>
    </div>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 42px;
}


#container{
    width:400px;
    height:550px;
    background-color: white;
    margin:10px auto;
    display:grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.8fr 1fr 1fr 1fr 1fr 1fr;

}
button{
    border:1px solid black;
}
.no-left{
    border-left: none;
}
#display{
    grid-row: 1/2;
    grid-column:1/-1;
    background-color: black;
    color:white;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    border:none;
    font-size: 36px;
    font-family: 'Courier New', Courier, monospace;
    padding: 0px 5px;
}
#btnClr{
    grid-row: 2/3;
    grid-column:1/3;

}
#btn0{
    grid-row:-2/-1;
    grid-column: 1/-2;
    border-bottom: none;
}

#btnBck{
    order:1;
}
#btnDiv{
    order:2;
    border-right: none;
}
#btnMul{order:6;}
#btnSub{order:10;}
#btnSum{order:14;}
#btnEql{order:16;border-bottom: none;}
#btn1{order:11}
#btn2{order:12}
#btn3{order:13}
#btn4{order:7}
#btn5{order:8}
#btn6{order:9}
#btn7{order:3}
#btn8{order:4;}
#btn9{order:5;}

.orange{
    background-color: #DF974C;
    color:white;
    border-right: none;
}

.orange:hover{
    background-color: #dfb07e;
}
.orange:active{
    background-color: #dd8d37;
}
.white{
    background-color: #D8D9DB;
    color:black;
}

.white:hover{
    background-color: #ebebeb;
}
.white:active{
    background-color: #bbbcbe;
}

JavaScript

window.onload = ()=>{
    const container = document.querySelector("#container");
    const update = handleInput();

    container.addEventListener('click',(event)=>{
        if(event.target.tagName==="BUTTON"){
           update(event.target.innerText);
        }
    });

}

function handleInput(){
    let expression = "0";
    const display = document.querySelector("#display");
    display.onkeypress = () => false;
    const operators = /[×\-÷\+]/;
    const operatorsEnd =/[×\-÷\+]$/; 
    const rerender = render();

    return function(operator){
        let newValue;
        if(display.value==="Infinity") newValue ="0"; 
        switch(operator)
        {
            case"C":
                newValue ="0";
                expression="0";
                break;
            case"←":
                if(display.value.length!=1)
                {
                    newValue=display.value.slice(0,-1);
                    expression = expression.slice(0,-1);
                }
                else
                {
                    newValue = 0;
                    if(expression.length==1)
                    expression = "0";
                    else if(display.value!="0") expression = expression.slice(0,-1);
                }
                break;
            case"=":
               if(expression.search(operatorsEnd)===-1)
                {
                    newValue = evaluate(expression); 
                    expression = newValue.toString();
                    if(expression==="Infinity") expression="0";
                } 
                else newValue = 0;
                break;
            
            default:
                if(operator.search(operators)==-1)
                {
                    if(display.value==="0" || display.value==="Infinity")
                    {
                    newValue=operator;
                    if(expression=="0")expression = operator;
                    else expression+=operator;
                    }
             ...