JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/vader/jquery-ui.min.css">
<h1>old-school bandcamp embed code generator</h1>
<div class="choices">
    <div class="header first">item:</div>
    <div class="indent">
        type: <select data-bind="value: type, options: types"></select>
        <label>id: <a href="#" class="help" data-onwhat="id">(?)</a> <input type="number" data-bind="value: id" /></label>
    </div>
    <div class="header">size:</div>
    <div class="indent">
        <div>
            <label><input type="radio" value="no" data-bind="checked: custom_size" /> standard size: </label>
            <select data-bind="value: size, options: sizes, optionsText: 'name', optionsValue: 'id'"></select>
        </div>
        <div>
            <label><input type="radio" value="yes" data-bind="checked: custom_size" /> custom layout: <a href="#" class="help" data-onwhat="customurl">(?)</a> </label>
            <input type="text" data-bind="value: custom_url" />
            <label>size: <input class="dim" type="number" data-bind="value: custom_width" /></label> x <input class="dim" type="number" data-bind="value: custom_height" />
        </div>
    </div>
    <div class="header">colors:</div>
    <div class="indent">
        <div>
            <label><span class="colorlabel">background:</span><input type="text" data-bind="value: bgcol" /></label>
        </div>
        <div>
            <label><span class="colorlabel">links:</span><input type="text" data-bind="value: linkcol" /></label>
        </div>
        <div>
            <label><span class="colorlabel">text:</span><input type="text" data-bind="value: fgcol" /></label>
        </div>
        <div>
            <label><input type="checkbox" data-bind="checked: transparent" /> transparent</label>
        </div>
    </div>
</div>

<div class="results">
...

CSS

textarea {
    width: 400px;
    height: 100px;
}
* {
    font-family: sans-serif;
    font-weight: 100;
}
.help {
    font-size: 75%;
}
}
.choices {
    margin: 10px;
    border: 1px solid black;
    padding: 10px;
}
.results {
    margin: 10px;
    padding: 10px;
}
.header.first {
    margin: 0 0 10px 0;
}
.header {
    margin: 10px 0;
    font-weight: bold;
}
.indent {
    position: relative;
    left: 20px;
    margin-top: 10px;
}
.colorlabel {
    display: inline-block;
    width: 100px;
}
.dim {
    width: 50px;
}

JavaScript

function BCPlayer() {
    var self = this;
    self.size = ko.observable("venti");
    self.type = ko.observable("album");
    self.id = ko.observable("524479947");
    self.linkcol = ko.observable("55AA66");
    self.bgcol = ko.observable("DDDDDD");
    self.fgcol = ko.observable("333333");
    self.transparent = ko.observable(false);
    self.types = ko.observableArray(["album", "track"]);
    self.custom_size = ko.observable("no");
    self.custom_url = ko.observable("http://bctest.nfshost.com/test.txt"); //sample url from bandcamptechblog
    self.custom_width = ko.observable(500);
    self.custom_height = ko.observable(206);
    
    self.sizes = ko.observableArray([
            { id: "venti", name: "venti" },
            { id: "grande",  name: "grande" },
            { id: "grande2",  name: "grande with tracklist" },
            { id: "grande3", name: "grande with art and tracklist" },
             { id: "tall", name: "tall" },
             { id: "tall2", name: "tall with tracklist" },
             { id: "short", name: "short" }
        ]);

    var dims = {
        venti: { w: 400, h: 100 },
        grande: { w: 300, h: 100 },
        grande2: { w: 300, h: 355 },
        grande3: { w: 300, h: 415 },
        tall_album: { w: 150, h: 295 },
        tall_track: { w: 150, h: 270 },
        tall2: { w: 150, h: 450 },
        short: { w: 46, h: 23 }
    };
    self.dims = ko.computed(function() {
        if(self.custom_size() == "yes") {
            return { w: self.custom_width(), h: self.custom_height() };
        }
        
        return dims[self.size() + "_" + self.type()] || dims[self.size()];
    });
    self.width = ko.computed(function() {
        var dims = self.dims();        
        return dims.w;
    });
    self.height = ko.computed(function() {
        var dims = self.dims();        
        return dims.h;
    });
    self.layout_url = ko.computed(function() {
        return escape(self.custom_url()).replace(/\//g, "%2F").replace(/_/g,...