JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<a class="infoToggler" href="#">Toggle 1</a>
<a class="errorToggler" href="#">Toggle 2</a>

<div class="notification-bar">
    <script type="text/html" id="notificationprototypesimplesuccess">
        <div class="notification <%=type%>" data-notification-action="click:hide;auto:hide;mouseenter:stopdelayedhide;mouseleave:delayedhide">
            <div class="notification-content">
                <h2 class="notification-title"><%=title%></h2>
            </div>
        </div>
    </script>
    <script type="text/html" id="notificationprototypesuccess">
        <div class="notification <%=type%>" data-notification-action="click:hide">
            <div class="notification-content">
                <h2 class="notification-title"><%=title%></h2>
                <%=content%>
            </div>
        </div>
    </script>
    <script type="text/html" id="notificationprototypeinfo">
        <div class="notification <%=type%>" data-notification-action="click:hide">
            <div class="notification-content">
                <h2 class="notification-title"><%=title%></h2>
                <%=content%>
            </div>
        </div>
    </script>
    <script type="text/html" id="notificationprototypeerror">
        <div class="notification <%=type%>" data-notification-action="click:hide">
            <div class="notification-content">
                <h2 class="notification-title"><%=title%></h2>
                <%=content%>
            </div>
        </div>
    </script>
    <script type="text/html" id="notificationprototypesystemerror">
        <div class="notification <%=type%>" data-notification-action="click:hide">
            <div class="notification-content">
                <h2 class="notification-title"><%=title%></h2>
                <%=content%>
            </div>
        </div>
    </script>
    <!--<div class="notification error" data-notification-state="hidden" data-notification-action="click:hide">
        <div class="notification-content">
           ...

CSS

body {
    font-family: Arial, sans-serif;
}

/** Bootstrap */
@font-face {
    font-family: 'IcoMoon';
    src: url('https://dl.dropbox.com/s/zo8l769zo9uryb3/icomoon.woff?dl=1') format('woff');
    font-weight: normal;
    font-style: normal;
}

/** Notifications */

.notification-bar {
    position: fixed;
    z-index: 900;
    bottom: 0;
}
.notification {
    position: fixed;
    overflow: hidden;
    bottom: -100%;
    width: 100%;
    max-height: 0;
    
    background-color: #e7e7e7;
    
    -webkit-box-shadow: 0px 0px 20px 1px rgba(189, 189, 189, 0.65);
    -moz-box-shadow: 0px 0px 20px 1px rgba(189, 189, 189, 0.65);
    -o-box-shadow: 0px 0px 20px 1px rgba(189, 189, 189, 0.65);
    -ms-box-shadow: 0px 0px 20px 1px rgba(189, 189, 189, 0.65);
    box-shadow: 0px 0px 20px 1px rgba(189, 189, 189, 0.65);
   
    
    transition: all 1000ms;
    -moz-transition: all 1000ms; /* Firefox 4 */
    -ms-transition: all 1000ms; /* Safari and Chrome */
    -webkit-transition: all 1000ms; /* Safari and Chrome */
    -o-transition: all 1000ms; /* Opera */
}
    .notification.notificationVisible {
        bottom: 0;
        max-height: 33%;
        overflow-y: scroll;
    }
    .notification.notificationVisible:hover {
        left: 0;
/*        overflow-y: auto;*/
        max-height: 100%;
    }


.notification:after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 1px;
    background-color: white;
    
    text-indent: 100%;
    word-wrap: nowrap;
    overflow: hidden;
    
    border-top: 1px solid #bdbdbd;
}

.notification-content:before {
    display: block;
    font-size: 40px;
    line-height: 40px;
    font-family: "IcoMoon";
    content: "s";
    
    width: 30px;
    position: absolute;
    left: 50%;
    top: 25px;
    margin-left: -550px;
    padding: 0;
}

.notification-content {
    width: 1010px;
    margin: 0 auto;
    padding: 30px 30px 30px 60px;
}

.notification-title {
    text-transform:...

JavaScript

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};
  
  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :
      
      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
        
        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +
        
        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");
    
    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();

if(Udir === undefined) {
    var Udir = {};
}

Udir.notification = function(b, o) {
    
    var options = {
        eventNS : ".notification",
        autoEventDelay : 3000,
        stateAttr : "data-notification-state",
        actionTriggerAttr : "data-notification-action",
        prototypes : {
            "simplesuccess" : "notificationprototypesimplesuccess",
            "success" : "notificationprototypesuccess",
            "info" : "notificationprototypeinfo",
            "error" : "notificationprototypeerror",
            "systemerror" : "notificationprototypesystemerror"
        },
        notificationSelector : ".notification",
        notificationShowClass : "notificationVisible"
    };
    
    var bar = null;
    var notifications = new Array();
    var delayedhideid =...