JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.1/backbone.marionette.min.js"></script>
<script src="https://cdn.rawgit.com/not-only-code/marionette-forms/master/dist/marionette-forms.min.js"></script>
<form id="my-form">
    <fieldset class="fields">
        <label for="form-name">Name</label>
        <input type="text" id="form-name"/>
        <label for="form-surname">Surname</label>
        <input type="text" id="form-surname"/>    
        <label for="form-email">Email</label>
        <input type="email" id="form-email"/>
        <label for="form-age">Age</label>
        <input type="number" id="form-age"/>
        <label for="form-password">Password (6 char min)</label>
        <input type="password" id="form-password"/>
        <label for="form-password-repeat">Repeat Password</label>
        <input type="password" id="form-password-repeat"/>
    </fieldset>
    <fieldset class="controls">
        <code class="result"></code>
        <a id="inject-button" class="button">Inject data</a>
        <a id="reset-button" class="button">reset values</a>
        <a id="submit-button" class="button green">Send</a>
    </fieldset>
</form>

CSS

body {
    font: normal 15px/1.2em Helvetiva,Arial,Sans-serif;
    color: #666;
    background-color: #EEE;
    padding: 20px
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
}

#my-form {
    position: relative;
    background-color: white;
    padding: 20px;
    overflow: hidden;
}

#my-form:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: solid 10px transparent;
}

#my-form.invalid:before {
    border-top-color: #C00;
    border-left-color: #C00;
}

#my-form.valid:before {
    border-top-color: #BFD541;
    border-left-color: #BFD541;
}

fieldset {
    position: relative;
    width: 50%;
    overflow: hidden;
    border: none;
}

.fields {
    float: left;
}

.controls {
    width: 46%;
    float: right;
}


label,
input {
    float: left;
    clear: left;
    margin-bottom: 5px;
}

input {
    font: normal 15px/1.2em Helvetiva,Arial,Sans-serif;
    width: 90%;
    color: #999;
    padding: 5px 0 5px 10px;
    margin-bottom: 15px;
    border: solid 1px #aeaeae;
}

input:last-child {
    margin-bottom: 0;
}

input.required {
    border-left-width: 2px;
    border-left-color: orange;
}

input.invalid {
    color: #C00;
    border-left-color: #C00;
}

.result {
    position: relative;
    display: block;
    width: 100%;
    height: 240px;
    font:normal 12px/1.8em Monaco, Consolas, monospace;
    color: #999;
    background-color: #F8F8F8;
    padding: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}


.button {
    display: block;
    height: 30px;
    width: 100%;
    border: none;
    font: normal 15px/30px Helvetiva,Arial,Sans-serif;
    background-color: #EAEAEA;
    cursor: pointer;
    color: #666;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 15px;
}
.button.green {
    color: white;
    background-color: #BFD541
}
.button.disabled {
    background-color: #eaeaea;
    color: #CCC;
    cursor: default;
}

JavaScript

var attributes = {
    name: 'John',
    surname: 'Smith',
    age: 36,
    email: 'john.smith@gmail.com',
    password: '5#cTsf*^98'
};

var MyForm = Backbone.Marionette.FormView.extend({
    el: '#my-form',
    ui: {
        result: '.result',
        inject: '#inject-button',
        reset: '#reset-button',
        submit: '#submit-button'
    },
    events: {
        'click @ui.inject': 'injectData',
        'click @ui.reset': 'resetData',
        'submit': 'formSubmit'
    },
    schema: {
        name: {
            ui: '#form-name',
            event: 'input',
            type: 'text',
            options: {
                length: 4
            }
        },
        surname: {
            ui: '#form-surname',
            event: 'input',
            type: 'text',
            validate: false
        },
        age: {
            ui: '#form-age',
            event: 'input',
            type: 'number'
        },
        email: {
            ui: '#form-email',
            event: 'input',
            type: 'email'
        },
        password: {
            ui: '#form-password, #form-password-repeat',
            event: 'input',
            type: 'password',
            options: {
                repeat: '#form-password-repeat',
                length: 6
            }
        }
    },
    // invalid callback use example 
    invalid: function() {
        this.ui.submit.addClass('disabled');
        this.ui.submit.prop('disabled', true);
    },
    // valid callback use example
    valid: function() {
        this.ui.submit.removeClass('disabled');
        this.ui.submit.prop('disabled', false);
    },
    initialize: function() {
        this.bindUIElements();
        // to show the model
        this.listenTo(this.model, 'change', this.showResult);
    },
    // to show the model
    showResult: function() {
        this.ui.result.html(
            JSON.stringify(this.model.toJSON(), null, 4)
        );
    },
    // it will reset the model with attributes var
 ...