JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calc">
  <form>
    <textarea rows="10" cols="25" id="form" readonly>0</textarea>
  </form>
  <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" name="but" value="(" class="butns2">
  <input type="button" name="but" value=")" class="butns2">
  <input type="button" id="dot" 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: left;
            width : 180px;
            height: 100px;
            margin-bottom : 5px;
            font-family: Verdana;
            font-weight: bold;
            resize: none;
        }
        .butns {
            border-radius:100px;
            color: darkgreen;
            font-size: 20px;
            width: 60px;
            height: 35px;            
            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: -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: -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: 395px;
            width: 188px;
            background-color: #4bb3e2;
        }

JavaScript

dot.disabled = true;
    var form = document.getElementById('form');
    var but = document.getElementsByName('but');
    var str = '';
    function solve() {
        var s = form.value;
        // разделяем на числа и знаки
        var ss = s.split('');
        var 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++;
            }
        }
        sss = ss.join('').split(' ');
        for (var i = 0; i < sss.length; i++) {
            if (isNaN(sss[i])){
                t = sss[i].split('');
                sss[i] = t;
            }
        }
        sss = sss.flat();
        // отрицательные
        if (sss[0] == '-'){
            let changeFirstABS = -sss[1];
            sss[1] = changeFirstABS;
            sss.splice(0,1);
        }
        for (var i = 0; i < sss.length; i++) {
            if(!isNaN(sss[i]) && sss[i - 1] == '-' && isNaN(sss[i - 2])){
                t = -sss[i];
                sss[i] = t;
                sss.splice(i - 1,1);
            }
        }
        // отрицательные
        for (var i = 0; i < sss.length; i++) {
            if(!isNaN(sss[i])){sss[i] = parseInt(sss[i])}
        }
        console.log(sss);
        // из строки получили массив положительных и отрицательных чисел, скобок и знаков
        // теперь переводим его из инфиксной записи в постфиксную
        var s = sss;
        function seek(stack) {
            return stack[stack.length - 1];
            // последний элемент стека
        }

        ops = {
            '+': 1,
            '-': 1,
            '/': 2,
            '*': 2
        };

        stack = [];
        out = [];
        for (var c = 0; c < s.length; c++) {
            if (!isNaN(s[c])) {
                out.push(s[c]);
                // число добавляем на выход
                continue;
            }
            if (s[c] in ops) { //...