JSFiddle - React, Tailwind, and code Playground

by joelhooks

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/normalize.min.css">
<div ng-app="app">
    <div ng-controller="MainCtrl">
        <div class="row">
             <h3>This is the header</h3>

        </div>
        <div class="row">
            <div class="small-4 columns">
                <ul>
                    <li ng-repeat="page in content"> <a ng-click="setPage(page)">{{page.name}} Content</a>

                    </li>
                </ul>
            </div>
            <div class="small-8 columns content">
                <div ng-switch on="currentContent.name">
                    <div ng-switch-when="red" class="red">{{currentContent.content}}</div>
                    <div ng-switch-when="blue" class="blue">{{currentContent.content}}</div>
                    <div ng-switch-when="green" class="green">{{currentContent.content}}</div>
                    <div ng-switch-default>No Content!</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.1.2/css/foundation.min.css"> <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script> <script src="http://code.angularjs.org/1.1.5//angular-resource.min.js"></script> <style> ul, ol, dl {
    list-style-type: none;
}
.red {
    background: red;
    color: white;
}
.green {
    background: green;
    color: yellow;
}
.blue {
    background: blue;
    color: white;
}
.content {
    height: 100%;
}

JavaScript

angular.module('app', [])

    .controller('MainCtrl', function ($scope) {

    $scope.content = [{
        name: "red",
        content: "This is the purple content"
    }, {
        name: "blue",
        content: "This is the blue content"
    }, {
        name: "green",
        content: "This is the green content"
    }];
    $scope.currentContent = $scope.content[0];
    $scope.setPage = function (page) {
        $scope.currentContent = page;
    };
});