JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<div>Total:
    <input type="text" />
</div>

CSS

body > input {
    float: left;
    clear: both;
}

JavaScript

var inputs = $$('body > input').addEvent('keyup', function (e) {
    var numerico = this.value.replace(/[^0-9\.]/g, '');
    if (!numerico) this.value = this.value.slice(0, -1);
    var soma = inputs.map(function (input) {
        return parseFloat(input.value) || 0;
    }).reduce(function (a, b) {
        return a + b;
    }, 0);
    $$('body div > input').set('value', soma);
});