JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
    <body >
    <div ng-app="landing" layout="horizontal" flex>
<md-icon md-svg-src="https://material.angularjs.org/img/icons/cake.svg">
 <md-tooltip>This is Foo</md-tooltip>
 </md-icon>
        <div class="middle" layout="vertical" role="main" flex>
            <div class="content" ng-controller="AppCtrl">
                <md-content layout="vertical">
                    <md-button ng-repeat="project in projects" class="card">
                        {{project.value}}
                    </md-button>
                </md-content>
            </div>
        </div>
    </div>
</body>

CSS

.content {
    background-color: #e1f5fe;
}

.card {
    height: 100px;
}

JavaScript

var app = angular.module('landing', ['ngAnimate','ngMaterial']);

app.controller('AppCtrl', function ($scope) {
    $scope.projects = [
                { "value": "New" },
        { "value": "Close" },
            ];
});