JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script>
<div layout ng-controller="MyCtrl" flex="flex" layout-align="center center" layout-fill="layout-fill" layout-direction="column">
    <md-button class="md-primary" ng-click="showToast()">Toast it!</md-button>
</div>

SCSS

.some-item {
    height: 300px;
    background-color: #4679bd;
}

[layout^=''] {
    background-color: red;
    display: flex;
}

JavaScript

angular.module('MyApp', ['ngMaterial'])
.controller('MyCtrl', function($scope, $mdToast) {
    $scope.message = "Hello World";
    
    $scope.showToast = function() {
        var toast = $mdToast.simple()
          .content('Hello world')
          .action('OK')
          .highlightAction(false)
          .position('left top right');
      $mdToast.show(toast);
    };
});