JSFiddle - React, Tailwind, and code Playground

by x11a

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="demo" ng-controller="MainCtrl as main">
  <active-alert status="main.alert.status" text="main.alert.message"></active-alert>
  <h2>{{main.title}}</h2>
  <button ng-click="main.showSuccess()">
    show success
  </button>
  <button ng-click="main.showError()">
    show error
  </button>
</div>

CSS

.alert-popup {
    position: fixed; top: 0; right: 0; z-index: 1090; min-width: 400px;
}

JavaScript

angular.module('demo', [])
  .controller('MainCtrl', function() {
    var main = this;
    main.title = 'Active alert demo'
    main.alert = {}
    main.showSuccess = function() {
      main.alert.status = 'success'
      main.alert.message = 'this is success'
    }
    main.showError = function() {
      main.alert.status = 'error'
      main.alert.message = 'this is error'
    }
  })
  .component('activeAlert', {
    bindings: {
      status: '<',
      text: '<',
      onHide: '&'
    },
    controller: ['$timeout', function($timeout) {
      var ctrl = this;
      var elt, t, title, alertClass, iconClass;

      var checkStatus = function() {
        switch (ctrl.status) {
          case 'error':
            title = 'Error';
            alertClass = 'alert-danger';
            iconClass = 'fa-ban';
            return true;
          case 'warning':
            title = 'Warning';
            alertClass = 'alert-warning';
            iconClass = 'fa-warning';
            return true;
          case 'info':
            title = 'Info';
            alertClass = 'alert-info';
            iconClass = 'fa-info';
            return true;
          case 'success':
            title = 'Success';
            alertClass = 'alert-success';
            iconClass = 'fa-check';
            return true;
          default:
            return false;
        }
      }

      var build = function() {

        if (elt && elt.remove) {
          elt.remove();
        }

        if (t) {
          $timeout.cancel(t);
        }

        if (checkStatus()) {
          elt = angular.element('<div class="alert ' + alertClass + ' alert-dismissible alert-popup">' + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + '<h4><i class="icon fa ' + iconClass + '"></i> ' + title + '</h4> ' + ctrl.text + '</div>').appendTo('body');

          t = $timeout(function() {
            elt.fadeOut(500, function() {
              ctrl.status = null;
          ...