JSFiddle - React, Tailwind, and code Playground

by bryangrimes

HTML

<html ng-app="offers" >
    <body>
        <form class="form-horizontal" method="post"> 
            <fieldset> 
                <div class="container" ng:controller="Controller">
                    <div ng:repeat="field in fields">
                        <ng:switch on="field.type">
                            <div ng:switch-default class="input {{field.type}}" class="hero-unit">
                                <label labelfor="{{field.value}}">
                                    {{field.displayText}}
                                </label>
                                <ng:switch on="field.type">
                                    <input ng:switch-default type="{{field.type}}" ng:model="field.value" ng-readonly="{{field.readonly}}" ng:required="{{field.required}}" value="{{field.value}}" placeholder="{{field.placeholder}}">
                                     <input ng:switch-when="date" type="date"
                                        ng:model="field.value" ng:required="{{field.required}}"                                    
                                            value="{{field.value}}" placeholder="{{field.placeholder}}">
                                    <select ng:switch-when="select"
                                        ng:model="field.value" placeholder="{{field.placeholder}}"
                                         ng:required="{{field.required}}">
                                        <option ng:repeat="option in field.options" 
                                            value="{{option.value}}">{{option.name}}</option>
                                        </select>
                                </ng:switch>
                            </div>
                        </ng:switch>
                    </div><br/>
                    <p>
                        <button type="submit" class="btn btn-primary">Submit</button> 
                    </p>
                    <!-- <h2>Data:</h2>
                    <pre>{{fields |...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 20px;
    margin-left: 30px
}

JavaScript

function Controller() {
    $scope.offer = [
        {
        "DefaultValue": null,
        "HelpContext": null,
        "IsReadonly": false,
        "Name": "Created",
        "Placeholder": null,
        "Prompt": "Created",
        "Required": false,
        "Type": "Text",
        "Visible": false},
    {
        "DefaultValue": null,
        "HelpContext": null,
        "IsReadonly": false,
        "Name": "Errors",
        "Placeholder": null,
        "Prompt": "Errors",
        "Required": false,
        "Type": "Text",
        "Visible": false},
    {
        "DefaultValue": null,
        "HelpContext": null,
        "IsReadonly": false,
        "Name": "Expires",
        "Placeholder": null,
        "Prompt": "Expires",
        "Required": false,
        "Type": "DateTime",
        "Visible": false},
    {
        "DefaultValue": null,
        "HelpContext": null,
        "IsReadonly": false,
        "Name": "IsContract",
        "Placeholder": null,
        "Prompt": "Is Contract",
        "Required": false,
        "Type": "Boolean",
        "Visible": false},
    {
        "DefaultValue": null,
        "HelpContext": null,
        "IsReadonly": false,
        "Name": "IsValid",
        "Placeholder": null,
        "Prompt": "Is Valid",
        "Required": false,
        "Type": "Text",
        "Visible": false},
    {
        "DefaultValue": null,
        "HelpContext": null,
        "IsReadonly": false,
        "Name": "Modified",
        "Placeholder": null,
        "Prompt": "Modified",
        "Required": false,
        "Type": "Text",
        "Visible": false},
    {
        "DefaultValue": null,
        "HelpContext": null,
        "IsReadonly": false,
        "Name": "OfferCode",
        "Placeholder": null,
        "Prompt": "Offer Code",
        "Required": false,
        "Type": "Text",
        "Visible": false},
    {
        "DefaultValue": null,
        "HelpContext": "Offer length in months",
        "IsReadonly": false,
        "Name":...