JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
  <a class="btn" type="button" id="test1">alert</a>
  <a class="btn" type="button" id="test2">toasts</a>
  <a class="btn" type="button" id="test3">confirm</a>
  <a class="btn" type="button" id="test4">prompt</a>  
</div>

<script>
document.getElementById('test1').onclick = function () {
  alerty.alert('123', {title: 'Info', time:2222}, function(){alert('callback')})
}
document.getElementById('test2').onclick = function () {
  alerty.toasts('123', function(){alert('toasts callback')})
}
document.getElementById('test3').onclick = function () {
  alerty.confirm(
    'Are you sure?', 
    {title: 'Notes', cancelLabel: 'Cancel', okLabel: 'Confirm'}, 
    function(){
      alerty.toasts('this is ok callback', {place: 'top'})
    },
    function() {
      alerty.toasts('this is cancel callback')
    }
  )
}
document.getElementById('test4').onclick = function () {
  alerty.prompt('this is a prompt dialog', 
                {inputType: 'text', inputPlaceholder: 'fill the blank', inputValue: 'default value'},
                function(value){
    alerty.alert('value you typed is: <b>'+value+'</b>')
  }, function(){alert('cancel callback')})
}
</script>

CSS

/*!
 * alerty v0.0.1 (https://github.com/undead25/alerty#readme)
 * Copyright 2016 undead25
 * Licensed under the MIT license
 */.alerty{color:#1b1919;position:fixed;z-index:1061;border-radius:2px;width:400px;margin-left:-200px;background-color:#fff;-webkit-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;left:50%;top:50%;font-size:16px}.alerty.alerty-show{-webkit-animation:bounceIn .35s ease;-o-animation:bounceIn .35s ease;animation:bounceIn .35s ease}.alerty.alerty-hide{-webkit-animation:bounceOut .35s ease;-o-animation:bounceOut .35s ease;animation:bounceOut .35s ease}.alerty .alerty-title{padding:24px 24px 20px;font-size:20px;color:#1b1919;line-height:1}.alerty .alerty-title+.alerty-content{padding-top:0}.alerty .alerty-content{text-align:justify;padding:24px}.alerty .alerty-content .alerty-message{margin:0;padding:0;color:#635a56}.alerty .alerty-content .alerty-prompt{margin-top:16px;text-align:center;position:relative}.alerty .alerty-content .alerty-prompt input{width:100%;height:36px;display:inline-block;padding:6px 0;-webkit-box-shadow:none;box-shadow:none;border:none;outline:0;font-size:16px;color:#1b1919;border-bottom:1px solid #d9d6d4}.alerty .alerty-content .alerty-prompt input:focus+.input-line{visibility:visible;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1)}.alerty .alerty-content .alerty-prompt .input-line{height:2px;position:absolute;bottom:0;width:100%;background-color:#4285f4;visibility:hidden;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);-o-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all .45s cubic-bezier(.23,1,.32,1);-o-transition:all .45s cubic-bezier(.23,1,.32,1);transition:all .45s cubic-bezier(.23,1,.32,1);display:block}.alerty...

JavaScript

/*!
 * alerty v0.0.1 (https://github.com/undead25/alerty#readme)
 * Copyright 2016 undead25
 * Licensed under the MIT license
 */
!function(){"use strict";var e={addClass:function(e,t){var n=e.className,l=""!==n?" ":"",o=n+l+t;e.className=o},removeClass:function(e,t){var n=" "+e.className+" ";n=n.replace(/(\s+)/gi," ");var l=n.replace(" "+t+" "," ");l=l.replace(/(^\s+)|(\s+$)/g,""),e.className=l},hasClass:function(e,t){var n=e.className,l=n.split(/\s+/),o=0;for(o in l)if(l[o]==t)return!0;return!1},addEvent:function(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n},removeEvent:function(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent?e.detachEvent("on"+t,n):delete e["on"+t]},removeElement:function(e){e&&e.parentNode&&e.parentNode.removeChild(e)},setUid:function(e){do e+=Math.floor(1e6*Math.random());while(document.getElementById(e));return e}},t=function(){var t={defaults:{okLabel:"确定",cancelLabel:"取消",time:2e3},previousCallback:null,template:'<div class="alerty-overlay" tabindex="-1"></div><div class="alerty"><div class="alerty-title"></div><div class="alerty-content"><p class="alerty-message"></p><div class="alerty-prompt"><input type="text" placeholder="" value=""><div class="input-line"></div></div></div><div class="alerty-action"><a class="btn-cancel"></a><a class="btn-ok"></a></div></div>',setup:function(t,n,l,o,a){var r="function"==typeof l;r&&(a=o,o=l);var i=document.querySelector(".alerty");if(i){e.removeElement(i);var s=this.previousCallback;s&&s()}var c=document.createElement("div");for(c.innerHTML=this.template;c.firstChild;)document.body.appendChild(c.firstChild);var...