JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/q.js/1.0.1/q.js"></script>
<h1>SuperUser's Smithing Calc</h1>

<div class="main">
    <table>
        <tbody>
            <tr>
                <td>Bar-type</td>
                <td>
                    <select data-bind="options: bars, optionsText: 'name', optionsValue: 'id', value: selected_bar"></select>
                </td>
            </tr>
            
            <!-- ko foreach: variables -->
    
            <tr>
                <td data-bind="text: $data.name"></td>
                <td>
                    <input data-bind="enable: $data.ro, value: $data.variable, valueUpdate: 'afterkeydown'" type="number">
                </td>
            </tr>
    
            <!-- /ko -->
        </tbody>
    </table>
        
    <p>You need to buy these resources:</p>
        
    <dl>
        <dt>Number of nature runes to buy</dt>
        <dd data-bind="text: num_nature_runes"></dd>
    
        <dt>Number of coals to buy</dt>
        <dd data-bind="text: num_coals"></dd>
    </dl>
        
    <p>You will gain:</p>
        
    <dl>
        <dt>Magic XP</dt>
        <dd data-bind="formatNumber: num_nature_runes() * 53"></dd>
    
        <dt>Smithing XP</dt>
        <dd data-bind="formatNumber: num_nature_runes() * xp_per_bar()"></dd>    
    </dl>
<div>

CSS

.main {
    
}

table {
    width: 100%;
    background: #efefef;
    padding: 0.5em;
}

tr td:first-child {
    font-weight: bold;
    width: 200px;
}

dl {
    margin-left: 1em;
}

dd {
    font-style: italic;
}

select {
    width: 154px;
    height: 22px;
}

input {
    width: 150px;
}

p {
    font-weight: bold;
    border: solid 0px #afafaf;
    border-bottom-width: 1px;
}

CoffeeScript

class MVVM
    constructor: ->
        @bars = ko.observableArray [
            { id: 2351, name: 'Iron' }
            { id: 2353, name: 'Steel' }
        ]
        
        @coals_per_bar = ko.observable 0
        @xp_per_bar = ko.observable 0
        @selected_bar = ko.observable()
        @selected_bar.subscribe (v) ->
            @variables[3].variable ''
            @variables[3].ro on
            
            switch v
                when 2353
                    @coals_per_bar 2
                    @xp_per_bar 17.5
                
                when 2351
                    @coals_per_bar 0
                    @xp_per_bar 12.5

            @GetItemPrice(v).then (value) =>
                @variables[3].variable parseInt(value, 10)
                @variables[3].ro off
        , @
        
        @bars.subscribe (v) ->
            console.log v
        , @
        
        @variables = [
            { name: 'Money', ro: ko.observable(on), variable: ko.observable 0 }
            { name: 'Price of nature rune', ro: ko.observable(on), variable: ko.observable 0 }
            { name: 'Price coal', ro: ko.observable(on), variable: ko.observable 0 }            
            { name: 'Price of bar', ro: ko.observable(on), variable: ko.observable 0 }
        ]
        
        @num_nature_runes = ko.computed ->
            c = @GetCostOfSuperHeat()
            
            if c is 0
                return 0
            
            Math.floor parseInt(@variables[0].variable(), 10) / c
        , @
        
        @num_coals = ko.computed ->
            @num_nature_runes() * parseInt(@coals_per_bar(), 10)
        , @
        
        @GetItemPrice(453).then (value) => # Coal
            @variables[2].variable parseInt(value, 10)
            @variables[2].ro off
            
        @GetItemPrice(561).then (value) => # Nature rune
            @variables[1].variable parseInt(value, 10)
            @variables[1].ro off

    GetCostOfSuperHeat: ->
       ...