JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<div id="exampleContainer" class='liveExample'> 
    
    <div class="readout">
        <h3>What's in the model?</h3>
        <table>
            <tr>
                <td class="label">Text value:</td>
                <td class="text-value" data-bind="text: stringValue"></td>
            </tr>
            <tr>
                <td class="label">Password:</td>
                <td class="password-value" data-bind="text: passwordValue"></td>
            </tr>
            <tr>
                <td class="label">Bool value:</td>
                <td class="bool-value"></td>
            </tr>
            <tr>
                <td class="label">Selected option:</td>
                <td class="select-value"></td>
            </tr>
            <tr>
                <td class="label">Multi-selected options:</td>
                <td class="multi-value"></td>
            </tr>
            <tr>
                <td class="label">Radio button selection:</td>
                <td class="radio-value"></td>
            </tr>
        </table>
    </div>
     
    <h3>HTML controls</h3>
    <table>
        <tr>
            <td class="label">Text value (updates on change):</td>
            <td><input name="stringInput1" /></td>
        </tr>
        <tr>
            <td class="label">Text value (updates on keystroke):</td>
            <td><input name="stringInput2" /></td>
        </tr>
        <tr>
            <td class="label">Text value (multi-line):</td>
            <td><textarea  name="stringInput3" ></textarea></td>
        </tr>
        <tr>
            <td class="label">Password:</td>
            <td><input type="password" name="passwordInput" /></td>
        </tr>
        <tr>
            <td class="label">Checkbox:</td>
            <td><input type="checkbox" name="checkboxInput" /></td>
...

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

.readout { width: 17em; float: right; }
.readout td { width: 50%; }
tr { vertical-align: top }
td { padding: 0.2em 0.2em 0.6em 0.2em; }
td.label { text-align: right; padding-right: 0.5em; }
input[type=radio] { margin: 0 0.25em 0 0.25em }

JavaScript

//Control Types
var ControlsModel = Backbone.Model.extend({
    defaults: {
        stringValue: 'Hello',
        passwordValue: 'mypass',
        booleanValue: true,
        optionValues: ['Alpha', 'Beta', 'Gamma'],
        selectedOptionValue: 'Gamma',
        multipleSelectedOptionValues: ['Alpha'],
        radioSelectedOptionValue: 'Beta'

    }
});

var ControlsView = Backbone.View.extend({
    el: $('#exampleContainer'),
    dropDownTemplate: _.template("<% _.each(values, function(name) { %> <option value='<%= name %>'><%= name %></option> <% }); %>"),
    events: {
        "change input[name='stringInput1']": "updateStringValue",
        "keyup input[name='stringInput2']": "updateStringValue",
        "change textarea[name='stringInput3']": "updateStringValue",
        "change input[name='passwordInput']": "updatePassword",
        "change input[name='checkboxInput']": "updateBoolean",
        "change select[name='dropDownInput']": "updateSelect",
        "change select[name='multiDropDownInput']": "updateMultiSelect",
        "change input[name='radioInput']": "updateRadio"
    },

    setTD: function(className, propertyName) {
        var propertyValue = this.model.get(propertyName);
        if (_.isArray(propertyValue)) {
            console.log('isArray');
            $("td." + className).html(propertyValue.join(","));
        }

        $("td." + className).html(propertyValue + '');
    },

    initialize: function() {

        // Initialize options in select lists
        var optionsHtml = this.dropDownTemplate({
            values: this.model.get('optionValues')
        });
        this.$el.find("select:eq(0),select:eq(1)").html(optionsHtml);

        // Initialize the td values
        this.setTD("text-value", "stringValue");
        this.setTD("password-value", "passwordValue");
        this.setTD("bool-value", "booleanValue");
        this.setTD("select-value", "selectedOptionValue");
        this.setTD("multi-value",...