JSFiddle - React, Tailwind, and code Playground

by NickJosevski

HTML

<script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/77c12aca8fd0db4fb9ca1a8fffe7688971f23bdb/backbone.js"></script>

<div id="modelfields">
    <fieldset>
        <div class="editor-label">
            Description
        </div>
        <div class="editor-field">
            <input id="Description" type="text" value="">
        </div>
        <div class="editor-label">
            MoreData
        </div>
        <div class="editor-field">
            <input id="MoreData" type="text" value="">
        </div>
        <input class="save" type="submit" value="save" />
    </fieldset>
</div>

CSS

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

    fieldset legend {
        display: none;
    }
    
    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

    fieldset label {
        display: block;
        font-size: 1.2em;
        font-weight: 600;
    }

    fieldset label.checkbox {
        display: inline;
    }

    fieldset input[type="text"],
    fieldset input[type="password"] {
        border: 1px solid #e2e2e2;
        color: #333;
        font-size: 1.2em;
        margin: 5px 0 6px 0;
        padding: 5px;
        width: 300px;
    }

        fieldset input[type="text"]:focus,
        fieldset input[type="password"]:focus {
            border: 1px solid #7ac0da;
        }

    fieldset input[type="submit"] {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
    }

JavaScript

$(function () {

    window.MyModel = Backbone.Model.extend({
        urlRoot: '/api/m',
    });
    
    window.MView = Backbone.View.extend({
        el: $('#modelfields'),
        
        initialize: function () { this.model.bind('change', this.render, this); },
        
        events: {
            "click .save": 'save'
        },
        
        save: function() {
            this.model.set({
                "description": this.$("#Description").val(),
                "more": this.$("#MoreData").val()
            });
            this.model.save();            
        },
        render: function () { return this; },
    });
                         
    window.MyMView = new MView({model: new MyModel});
});