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="BACKSPS" class="butns3"><br>
</div>

CSS

body {
            background-color: beige;
        }
        #form {
            text-align: right;
            width : 120px;
            margin-bottom : 5px;
        }
        .butns {
            color: darkgreen;
            font-size: 20px;
            width: 40px;
            background-color: antiquewhite;
        }
        .butns2 {
            color: red;
            font-size: 20px;
            width: 40px;
            background-color: antiquewhite;
        }
        .butns3 {
            color: red;
            font-size: 20px;
            width: 128px;
            background-color: antiquewhite;
        }
        #out {
            font-size: 20px;
            color: blue;
            font-family: Verdana;
        }
        #res {
            color: rgba(11,5,106,0.99);
        }
        #calc {
            margin-left: 10px;
        }

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;
                }
            }
 ...