JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
    
    <div class="row">
        <div class="col-xs-4">
            <h3>Red Blue and Yellow</h3>
            <form>
                <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon bgblue">Blue</div>
                      <input type="text" class="form-control" id="blue_input" placeholder="Amount" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon bgred">Red</div>
                      <input type="text" class="form-control" id="red_input" placeholder="Amount" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon bgyellow">Yellow</div>
                      <input type="text" class="form-control" id="yellow_input" placeholder="Amount" />
                    </div>
                </div>
            </form>
        </div>
        <div class="col-xs-4">
            <h3>Slivers, Shards and Fragments</h3>
            <form>
                <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon bgsliver">Slivers</div>
                      <input type="text" class="form-control" id="sliver_input" placeholder="Amount" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon bgshard">Shards</div>
                      <input type="text" class="form-control" id="shard_input" placeholder="Amount" />
                    </div>
                </div>
                <div...

CSS

#sliver, .bgsliver {
    background-color : #67BD3C;
}

#shard, .bgshard {
    background-color : #46CDF2;
}

#fragment, .bgfragment {
    background-color : #C446F2;
    color : white;
}

#upgrade {
    background-color : #F2CA46;
    color : #333;
}

.bgblue {
    background-color : #4144E0;
    color: white;
}
.bgred {
    background-color : #D61E27;
    color: white;
}
.bgyellow {
    background-color: #F2F246;
}

JavaScript

var Test = function (model) {
    
    var blue, red, yellow, sliver, shard, fragment, upgrade;
    
    blue = model.blue;
    red = model.red;
    yellow = model.yellow;

    sliver = (function (b, r, y) {
        var numOfSlivers = 0;
        
        if (b < r) {
            if (b < y) {
                numOfSlivers = b;
            } else {
                numOfSlivers = y;
            }
        } else {
            if (r < y) {
                numOfSlivers = r;
            } else {
                numOfSlivers = y;            
            }
        }
              
        return numOfSlivers + model.sliver;
    })(blue, red, yellow);
        
    shard = (function (s) {
        return Math.floor(s / 3) + model.shard;
    })(sliver);
    
    fragment = (function (s) {
        return Math.floor(s / 3) + model.fragment;
    })(shard);
    
    upgrade = (function (f) {
        return Math.floor(f / 3) + model.upgrade;
    })(fragment);
    
    return {
        red : red,
        blue : blue,
        yellow : yellow,
        sliver : sliver,
        shard : shard,
        fragment : fragment,
        upgrade : upgrade
    }
}

$(function() {
    
    var output = {
        red : 0,
        blue : 0, 
        yellow : 0, 
        sliver : 0, 
        shard : 0, 
        fragment : 0, 
        upgrade : 0
    };
    
    doCalculation = function () {
        return new Test(output);
    }
    
    setProp = function (opts) {
        if (opts === undefined) { console.error('opts required'); return; }        
        output[opts.colour] = (!isNaN(parseInt(opts.value))) ? parseInt(opts.value) : 0;
    };
    
    sendDataToUI = function (calculation) {
        
        $('#sliver').empty().append(calculation.sliver);
        $('#shard').empty().append(calculation.shard);
        $('#fragment').empty().append(calculation.fragment);
        $('#upgrade').empty().append(calculation.upgrade);

    };
    
    $('#blue_input, #red_input, #yellow_input, #sliver_input,...