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" name="but" 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-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: 395px;
            width: 188px;
            background-color: #4bb3e2;
        }

JavaScript

var form = document.getElementById('form');
var but = document.getElementsByName('but');
var str = '';
function solve() {
  var s = form.value;
  // разделяем на числа и знаки
  var ss = s.split('');
  for (var i = 0; i < ss.length - 1; i++) {
    if (   (!isNaN(ss[i]) && (isNaN(ss[i + 1]) && ss[i + 1] != '.')) || ((isNaN(ss[i]) && 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();
  for (var i = 0; i < sss.length; i++) {
    if(!isNaN(sss[i])) {sss[i] = parseFloat(sss[i])}
  }
  // отрицательные
  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);
    }
  }
  // отрицательные
  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) { // попался оператор
      while (ops[seek(stack)] >= ops[s[c]]) {
        // пока приоритет последнего элемента стека больше или равен приоритету текущего знака
        out.push(stack.pop());
        // на выход добавляем последний элемент стека и удаляем последний элемент из стека
      }
      stack.push(s[c]);
      // в стек добавляем текущий знак
      continue;
    }
    if (s[c] === ')') {
      // если попалась закрывающая...