JSFiddle - React, Tailwind, and code Playground

by Martin Večeřa

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<body ng-app="myApp">
    <div layout='column'>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <md-button>Toolbar</md-button>
            </div>
        </md-toolbar>
        <ui-view flex style="position:relative;"></ui-view>
    </div>
</body>

CSS

html, body {
    height: 100%;
}

JavaScript

angular.module('myApp', ['ngMaterial']).config(function($stateProvider) {
    $stateProvider.state('main', {
        url: '/',
        template: '<openlayers width="100%" height="100%"></openlayers>'
    });
})