JSFiddle - React, Tailwind, and code Playground

HTML

<button class="foo">アラート！</button>

CSS

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);

.sweet-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 1000;
}

.sweet-alert {
    background-color: white;
    font-family: 'Open Sans', sans-serif;
    width: 478px;
    padding: 17px;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -256px;
    margin-top: -200px;
    overflow: hidden;
    display: none;
    z-index: 2000;
}

@media all and (max-width: 540px) {
    .sweet-alert {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        left: 15px;
        right: 15px;
    }
}

.sweet-alert h2 {
    color: #575757;
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    text-transform: none;
    position: relative;
}

.sweet-alert p {
    color: #797979;
    font-size: 16px;
    text-align: center;
    font-weight: 300;
    position: relative;
    margin: 0;
    line-height: normal;
}

.sweet-alert button {
    background-color: #AEDEF4;
    color: white;
    border: none;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    border-radius: 5px;
    padding: 10px 32px;
    margin: 26px 5px 0 5px;
    cursor: pointer;
}

.sweet-alert button:focus {
    outline: none;
    box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.sweet-alert button:hover {
    background-color: #a1d9f2;
}

.sweet-alert button:active {
    background-color: #81ccee;
}

.sweet-alert button.cancel {
    background-color: #D0D0D0;
}

.sweet-alert button.cancel:hover {
    background-color: #c8c8c8;
}

.sweet-alert button.cancel:active {
    background-color: #b6b6b6;
}

.sweet-alert button.cancel:focus {
    box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset...

JavaScript

// SweetAlert
// 2014 (c) - Tristan Edwards
// github.com/t4t5/sweetalert
(function() {

    var modalClass = '.sweet-alert',
        overlayClass = '.sweet-overlay',
        alertTypes = ['error', 'warning', 'info', 'success'];


    /*
     * Manipulate DOM
     */

    var getModal = function() {
        return document.querySelector(modalClass);
    },
    getOverlay = function() {
        return document.querySelector(overlayClass);
    },
    hasClass = function(elem, className) {
        return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
    },
    addClass = function(elem, className) {
        if (!hasClass(elem, className)) {
            elem.className += ' ' + className;
        }
    },
    removeClass = function(elem, className) {
        var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
        if (hasClass(elem, className)) {
            while (newClass.indexOf(' ' + className + ' ') >= 0) {
                newClass = newClass.replace(' ' + className + ' ', ' ');
            }
            elem.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    },
    escapeHtml = function(str) {
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(str));
        return div.innerHTML;
    },
    _show = function(elem) {
        elem.style.opacity = '';
        elem.style.display = 'block';
    },
    show = function(elems) {
        if (elems && !elems.length) {
            return _show(elems);
        }
        for (var i = 0; i < elems.length; ++i) {
            _show(elems[i]);
        }
    },
    _hide = function(elem) {
        elem.style.opacity = '';
        elem.style.display = 'none';
    },
    hide = function(elems) {
        if (elems && !elems.length) {
            return _hide(elems);
        }
        for (var i = 0; i < elems.length; ++i) {
            _hide(elems[i]);
        }
    },
    isDescendant = function(parent, child) {
        var node =...