JSFiddle - React, Tailwind, and code Playground
by Christiaan Westerbeek
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
<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-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
<div ng-app="myApp">
<div layout="column" ng-controller="MainCtrl">
<md-toolbar class="md-primary">
<h1 class="md-toolbar-tools">
Start using Dobetr
</h1>
</md-toolbar>
<md-content layout-padding>
<form name="projectForm">
<h3>Create an account for your 14-Day Free Trial</h3>
<md-input-container>
<label>Your Email</label>
<input name="email" ng-model="email" type="email" ng-required>
<div ng-messages="projectForm.email.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input name="password" ng-model="password" type="password" ng-required>
<div ng-messages="projectForm.password.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Confirm Password</label>
<input name="confirm" ng-model="confirm" type="password" match="password">
<div ng-messages="projectForm.confirm.$error">
<div ng-message="match">Passwords must match.</div>
</div>
</md-input-container>
<md-button class="md-raised md-primary">Primary</md-button>
</form>
</md-content>
</div>
<div layout="row"...
JavaScript
angular.module('myApp', [
'ngMaterial',
'ngAnimate',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.controller('MainCtrl', function ($scope) {
});