JSFiddle - React, Tailwind, and code Playground

HTML

<p>First Number: 55.212
  <br/>
  <input data-bind="value:firstNumber"/>
  </p>
  <p>Second Number:100
  <br/>
  <input data-bind="value:secondNumber"/>
  </p>
  <p>Third Number:
  <br/>
  <input data-bind="value:thirdNumber"/>
  </p>
  <p>Fourth Number:
  <br/>
  <input data-bind="value:fourthNumber"/>
  </p>
  <p>Sum:
  <br/>
  <textarea data-bind="value:Sum"></textarea>
  </p>
  <p>Product:
  <br/>
  <textarea data-bind="value:Product"></textarea>
  </p>

JavaScript

// handler of behaviour in Knockout JS
function ViewModel() {
    var self =this;
    self.firstNumber = ko.observable("");
    self.secondNumber = ko.observable("");
    self.thirdNumber = ko.observable("");
    self.fourthNumber = ko.observable("");


    self.Sum = ko.computed(function(){
    return Number(self.firstNumber()) + Number(self.secondNumber()) + Number(self.thirdNumber()) +
    Number(self.fourthNumber());
    });

    self.Product = ko.computed(function(){
     return Number(self.firstNumber()) * Number(self.secondNumber());
    });


}
//Activate knockout.js
ko.applyBindings(new ViewModel());