JSFiddle - React, Tailwind, and code Playground

by patelsan

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.3.0/lodash.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div ng-app="navApp">
    <div class="row">
        <div class="col-xs-12 topbar"></div>
    </div>
    <div class="row" ng-controller="PersonalInfoCtrl">
        <div class="col-xs-4 sidebar">
            <tree fields="navigator.navTree" model="model"></tree>
        </div>
        <div id="content" class="col-xs-8">
            <form role="form">
                <legend>Contact Information</legend>
                <div field="Contact Information" field-id="contactInfo">
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group" field="First Name" field-id="firstName">
                                <label for="firstName">First Name</label>
                                <input type="text" ng-model="model.firstName" class="form-control" id="firstName" placeholder="First Name">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group" field="Last Name" field-id="lastName">
                                <label for="lastName">Last Name</label>
                                <input type="text" ng-model="model.lastName" class="form-control" id="lastName" placeholder="Last Name">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div...

CSS

.required {
    color: #B54322;
}
.valid {
    color: #319574;
}
.sidebar {
    background-color: #EFEDDF;
}
.topbar {
    background-color: #66746D;
    height: 4px;
}
.tree {
    list-style: none;
    padding-left: 18px;
    font-size: 11px;
}
.tree li span {
    border: 1px solid #999;
    border-radius: 2px;
    display: inline-block;
    padding: 1px 6px;
    text-decoration: none;
}
.tree li div {
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #606e67;
    font-size: 13px;
    padding: 2px 4px 2px 12px;
    margin-bottom: 1px;
    cursor: pointer;
}
#content {
    background-color: #F6F5ED;
}

JavaScript

var app = angular.module('navApp', ['lodash']);
var models = models || {};
var helpers = helpers || {};

var lodash = angular.module('lodash', []);
lodash.factory('_', function () {
    return window._;
});

app.factory('personalInfo', function () {
    return new models.PersonalInfo();
});

app.factory('navigator', function () {
    return new helpers.Navigator();
});

app.controller('PersonalInfoCtrl', ['$scope', 'personalInfo', 'navigator', '_', function ($scope, personalInfo, navigator, _) {
    $scope.search = {
        text: ''
    };
    $scope.model = personalInfo;
    $scope.navigator = navigator;
}]);

models.PersonalInfo = (function () {
    function PersonalInfo() {
        this.requiredFields = [];
        this.require('firstName', 'lastName', 'email', 'addressLine1', 'city', 'state', 'zip', 'insuranceCompany', 'plicyNumber', 'emergencyContact', 'emergencyPhone');
    }

    PersonalInfo.prototype.require = function () {
        this.requiredFields.push.apply(this.requiredFields, arguments);
    };

    PersonalInfo.prototype.isFieldValid = function (field) {
        if (this.isFieldRequired(field)) {
            return this[field] != undefined && this[field] != null && this[field].length > 0;
        } else {
            return false;
        }
    };

    PersonalInfo.prototype.isFieldRequired = function (field) {
        return this.requiredFields.indexOf(field) != -1;
    };

    return PersonalInfo;
})();

helpers.Navigator = (function () {
    var Navigator = function () {
        this.navTree = [];
        self = this;
    }

    Navigator.prototype.addField = function (name, id, parentId) {
        if (parentId) {
            var parentField = this.searchField(this.navTree, parentId);
            parentField.fields.push({
                name: name,
                id: id,
                fields: []
            });
        } else {
            this.navTree.push({
                name: name,
                id: id,
                fields: []
 ...