JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<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.10.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="Ctrl" layout="column" md-theme="green">
      <md-button class="md-raised" ng-click="showDialog()">Launch Modal</md-button>
</div>
</div>

CSS

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v0.6.1
 */
md-backdrop.md-opaque.md-green-theme {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute; }

md-bottom-sheet.md-green-theme {
  background-color: #fafafa;
  border-top-color: #bdbdbd; }
  md-bottom-sheet.md-green-theme.md-list md-item {
    color: rgba(0, 0, 0, 0.54); }
  md-bottom-sheet.md-green-theme .md-subheader {
    background-color: #fafafa; }
  md-bottom-sheet.md-green-theme .md-subheader {
    color: rgba(0, 0, 0, 0.54); }

.md-button.md-green-theme {
  border-radius: 3px; }
  .md-button.md-green-theme:not([disabled]):hover, .md-button.md-green-theme:not([disabled]):focus {
    background-color: rgba(158, 158, 158, 0.2); }
  .md-button.md-green-theme.md-fab {
    border-radius: 50%; }
  .md-button.md-green-theme.md-primary {
    color: #66bb6a;
    fill: #66bb6a; }
  .md-button.md-green-theme.md-warn {
    color: #ef5350;
    fill: #ef5350; }
  .md-button.md-green-theme.md-raised, .md-button.md-green-theme.md-fab {
    background-color: rgba(158, 158, 158, 0.185); }
    .md-button.md-green-theme.md-raised:not([disabled]):hover, .md-button.md-green-theme.md-raised:not([disabled]):focus, .md-button.md-green-theme.md-fab:not([disabled]):hover, .md-button.md-green-theme.md-fab:not([disabled]):focus {
      background-color: rgba(158, 158, 158, 0.3); }
    .md-button.md-green-theme.md-raised.md-primary, .md-button.md-green-theme.md-fab.md-primary {
      color: white;
      background-color: #4caf50; }
      .md-button.md-green-theme.md-raised.md-primary:not([disabled]):hover, .md-button.md-green-theme.md-raised.md-primary:not([disabled]):focus, .md-button.md-green-theme.md-fab.md-primary:not([disabled]):hover, .md-button.md-green-theme.md-fab.md-primary:not([disabled]):focus {
        background-color: #43a047; }
    .md-button.md-green-theme.md-raised.md-warn, .md-button.md-green-theme.md-fab.md-warn {
      color: white;
      background-color:...

JavaScript

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

    app.controller('Ctrl', function MainController ($scope,$mdDialog){
      $scope.showDialog = function(evt, dlg) {
           $mdDialog.show({
               parent: angular.element(document.body),
               targetEvent: evt,
               // manually apply focus to the autocomplete control in the dialog
               // (otherwise, the dialog forces focus to the OK button)
               focusOnOpen: false,
               template:
               '<md-dialog aria-label="Dialog" style="width:80%; padding: 10px;">'+
               '<md-toolbar>'+
               '<div class="md-toolbar-tools">Dialog Header</div>'+
               '</md-toolbar>'+
                 '<md-content>'+
                 'lots of text here that does nothing but throw off the direction of the missing underlying stuff'+
                 '<br /><br />'+
                 '<md-chips ng-model="abc" md-autocomplete-snap md-require-match>'+
                 '<md-autocomplete '+
                 '            md-autofocus="true"'+
                 '            md-no-cache="true" '+
                 '            md-min-length="0" '+
                 '            md-selected-item="selected" '+
                 '            md-search-text="searchText" '+
                 '            md-items="item in items" '+
                 '            placeholder="Pick something..."> '+
                 '    <md-item-template>{{item}}</md-item-template>'+
                 '</md-autocomplete>'+
                 '<md-chip-template><span><em>{{$chip}}</em></span></md-chip-template>'+
                 '</md-chips>'+
                 '<br /><br />'+
               'lots of text here that does nothing but throw off the direction of the missing underlying stuff'+
                 '</md-content>'+
                 '</md-dialog>',
               controller: 'DialogController'
           }).then(
           function success (screenData) {
               // hit OK
...