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");
    var update = updateDisplay();

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

}


function updateDisplay(){
    var expression = "0";
    const display = document.querySelector("#display");
    display.onkeypress = ()=>{return false};
    const symbols = /[×\-÷\+]/;
    const symbolsEnd =/[×\-÷\+]$/; 
    
    return function(symbol){
        var value;
        if(display.value==="Infinity") value ="0"; 
        if(symbol==="C"){ value ="0"; expression="0";}
        else
        if(symbol==="←")
        {
            if(display.value.length!=1)
            {
                value=display.value.slice(0,-1);
                expression = expression.slice(0,-1);
            }
            else
            {
                value = 0;
                if(expression.length==1)
                expression = "0";
                else if(display.value!="0") expression = expression.slice(0,-1);
            }
        }
        else
        if(symbol ==="=")
        {   if(expression.search(symbolsEnd)===-1)
            {
                value = evaluate(expression); 
                expression = value.toString();
                if(expression==="Infinity") expression="0";
            } else value = 0;
                
        }
        else
        if(symbol.search(symbols)==-1)
        {
            if(display.value==="0" || display.value==="Infinity")
            {
             value=symbol;
             if(expression=="0")expression = symbol;
             else expression+=symbol;
            }
            else
            {
                value = display.value+symbol;
                expression+=symbol;
            }
        }
        else{
            value = "0";
            if(expression.search(symbolsEnd)==-1)
                expression+=symbol;
        }
       ...