JSFiddle - React, Tailwind, and code Playground

by Gerónimo Garcia Sgritta

HTML

<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<div style="background-color: black; z-index:2; padding: 10px;">
<div id="viewport" style="background-color:white;z-index:1"></div>
</div>
<button id="notify">Notify!</button>

CSS

#viewport {
    min-height:100px;
    max-width:600px;
    border: 2px solid blue;
    margin: 20px auto;
    padding: 10px;
}

.actionButton {
    text-shadow:         0px 0px 3px rgba(0, 0, 0, 0.9);
    color:                 #FFFFFF;
    font-weight:         bold;
    -webkit-box-shadow: 0px 0px 0px 1px rgba(13, 154, 13, 1);
    -moz-box-shadow:    0px 0px 0px 1px rgba(13, 154, 13, 1);
    box-shadow:         0px 0px 0px 1px rgba(13, 154, 13, 1);
    border:             1px solid #4ACC50;
    border-radius:         5px;
    width:                150px;
    height:             36px;
    margin:             7px 0;
    background-image:     url('../../images/pm/bkg.jpg');
    background-image:     linear-gradient(bottom, rgb(10,177,10) 17%, rgb(126,230,142) 89%);
    background-image:     -o-linear-gradient(bottom, rgb(10,177,10) 17%, rgb(126,230,142) 89%);
    background-image:     -moz-linear-gradient(bottom, rgb(10,177,10) 17%, rgb(126,230,142) 89%);
    background-image:     -webkit-linear-gradient(bottom, rgb(10,177,10) 17%, rgb(126,230,142) 89%);
    background-image:     -ms-linear-gradient(bottom, rgb(10,177,10) 17%, rgb(126,230,142) 89%);
    background-image:     -webkit-gradient(linear, left bottom, left top, color-stop(0.17, rgb(10,177,10)), color-stop(0.89, rgb(126,230,142)));
    background-color:     #4ACC50;
    cursor:             pointer;
}

.btnDanger {
    -webkit-box-shadow: 0px 0px 0px 1px rgba(154, 13, 13, 1);
    -moz-box-shadow:    0px 0px 0px 1px rgba(154, 13, 13, 1);
    box-shadow:         0px 0px 0px 1px rgba(154, 13, 13, 1);
    border:             1px solid #CC4A4A;
    background-image:     url('../../images/pm/bkg-btn-blue.png');
    background-image:     linear-gradient(bottom, rgb(177, 10, 10) 17%, rgb(230, 126, 126) 89%);
    background-image:     -o-linear-gradient(bottom, rgb(177, 10, 10) 17%, rgb(230, 126, 126) 89%);
    background-image:     -moz-linear-gradient(bottom, rgb(177, 10, 10) 17%, rgb(230, 126, 126) 89%);
   ...

JavaScript

!function($, $$){
    var tpl = ['<div class="alert alert-error notification-relative invisible">',
                  '<button type="button" class="close" data-dismiss="alert">&times;</button>',
               '{{#title}}<h4>{{title}}</h4>{{/title}}',
               '{{{message}}}',
               '{{#hasActions}}<p>{{#actions}}{{{.}}}{{/actions}}</p>{{/hasActions}}',
              '</div>'].join(''),
        tplFn = $$.compile(tpl),
        close = '[data-dismiss="alert"]',
        noop = function(){};

    function Alert(options){
        var _this = this;
        if('actions' in options.tplProps) options.tplProps.hasActions = true;
        this.element = $(tplFn(options.tplProps));
        //Give a little space so is a bit detached from the top
        this.offsetHeight = this.element.height() + 4;
        this.events = options.events || [];
        this.beforeShow = options.beforeShow || noop;
        this.afterShow = options.afterShow || noop;
        this.beforeDismiss = options.beforeDismiss || noop;
        this.afterDismiss = options.afterDismiss || noop;

        var event;
        while(event = this.events.pop()){
            this.element.on(event.trigger, event.selector, event.handler);
        }

        this.element.css('top', -'-20px').on('click', close, function(e){ _this.dismiss(e) });
        
        return this;
    }

    Alert.prototype.show = function(e){
            var _this = this,
            position = this.element.position();

        this.beforeShow(e);

        this.element.animate({
                top: '2px',
                opacity: 1
            }, function(){
            _this.afterShow(e);
        });

        return this;
    };

    Alert.prototype.dismiss = function(e){
        var _this = this;
        this.beforeDismiss(e);

        this.element.animate({
                top: '-20px',
                opacity: 0
            }, function(){
            _this.afterDismiss(e);
            _this.element.remove();
       ...