JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calc">
    <input type="text" id="form" value="0"><br>
    <input type="button" name="but" value="1" class="butns">
    <input type="button" name="but" value="2" class="butns">
    <input type="button" name="but" value="3" class="butns"><br>
    <input type="button" name="but" value="4" class="butns">
    <input type="button" name="but" value="5" class="butns">
    <input type="button" name="but" value="6" class="butns"><br>
    <input type="button" name="but" value="7" class="butns">
    <input type="button" name="but" value="8" class="butns">
    <input type="button" name="but" value="9" class="butns"><br>
    <input type="button" name="but" value="0" class="butns">
    <input type="button" name="but" value="+" class="butns2">
    <input type="button" name="but" value="-" class="butns2"><br>
    <input type="button" name="but" value="*" class="butns2">
    <input type="button" name="but" value="/" class="butns2">
    <input type="button" id="ravno" value="=" class="butns2"><br>
    <input type="button" id="clr" value="CLEAR" class="butns3"><br>
    <input type="button" id="bks" value="BACKSPACE" class="butns3"><br>
</div>

CSS

body {
            background-color: lightgrey;
        }
        #form {
            text-align: right;
            width : 180px;
            margin-bottom : 5px;
            font-family: Verdana;
            font-weight: bold;
        }
        .butns {
            border-radius:100px;        
            color: darkgreen;
            font-size: 20px;
            width: 60px;
            height: 35px;
            background-color: antiquewhite;
            background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
            color: #ffe;
        }
        .butns2 {
            border-radius:100px;
            color: red;
            font-size: 20px;
            width: 60px;
            height: 35px;
            background-color: antiquewhite;
            background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
            color: #ffe;
        }
        .butns3 {
            border-radius:100px;          
            color: red;
            font-size: 20px;
            width: 188px;
            height: 35px;
            background-color: antiquewhite;
            background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
            color: #ffe;
        }
        #out {
            font-size: 20px;
            color: blue;
            font-family: Verdana;
        }
        #calc {
            padding: 3px;
            margin-left: 10px;
            height: 273px;
            width: 188px;
            background-color: #4bb3e2;
        }

JavaScript

var form = document.getElementById('form');
    var but = document.getElementsByName('but');
    var str = '';    
    function solve() {
        let s = form.value;
        // разделяем на числа и знаки
        let ss = s.split('');
        let st1 = [];
        for (var i = 0; i < ss.length - 1; i++) {
            if ((!isNaN(ss[i]) && isNaN(ss[i + 1] )) || (isNaN(ss[i]) && !isNaN(ss[i + 1] ))) {
                ss.splice(i + 1,0,' ');
                i++;
                //console.log(ss[i])
            }
        }
        sss = ss.join('').split(' ');
        //отрицательные числа
        if (sss[0] == '-'){
            let changeFirstABS = -sss[1];
            sss[1] = changeFirstABS;
            sss.splice(0,1);
        }
        for (var i = 0; i < sss.length; i++) {
            if(sss[i].length >= 2 && isNaN(sss[i])){
                if (sss[i].charAt(1) == '-'){
                    console.log(-sss[i+1]);
                    let changeABS = -sss[i+1];
                    sss[i+1] = changeABS;
                }
                let t = sss[i].substring(0,1);
                sss[i] = t;
            }
        }
        //отрицательные числа
        for (var i = 0; i < sss.length; i++) {
            if (!isNaN(sss[i]) || sss[i] == '+' || sss[i] == '-') {st1.push(sss[i])}
            else {
                console.log(st1);
                // умножение
                if (sss[i] == '*') {
                    console.log(' mult ', st1, sss[i - 1], sss[i + 1]);
                    res = sss[i - 1] * sss[i + 1];
                    i++;
                    //console.log('before',st1);
                    //console.log(st1[st1.length - 1]);
                    st1[st1.length - 1] = res;
                    //console.log('after',st1);
                }
                // деление
                if (sss[i] == '/') {
                    res = sss[i - 1] / sss[i + 1];
                    i++;
                    st1[st1.length - 1] = res;
                }
           ...