JSFiddle - React, Tailwind, and code Playground

by joplomacedo

CSS

.ckwdg-scope,
.ckwdg-scope * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
}

.ckwdg-scope {
    font-family: calibri, helvetica, arial, sans-serif;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    display: none;
}

.ckwdg-is_active .ckwdg-scope {
    display: block;
}

.ckwdg-grid {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin: 0 -.6em;
    justify-content: center;
}

.ckwdg-grid--aic {
    align-items: center;
}

.ckwdg-grid_unit {
    padding: 0 .6em;
}

.ckwdg-grid--2 .ckwdg-grid_unit {
    flex: 0 0 50%;
    width: 50%;
}

.ckwdg-grid--3 .ckwdg-grid_unit {
    flex: 0 0 33.3333%;
    width: 33.3333%;
}

.ckwdg-widget__layer,
.ckwdg-widget__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ckwdg-widget__layer {
    -ms-align-items: flex-end;
    align-items: flex-end;
    justify-content: center;
    padding: 2em;
    display: none;
}

.ckwdg-is_open .ckwdg-widget__layer {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.ckwdg-widget__overlay {
    background-color: rgba(0, 0, 0, .2);
    animation: ckwdg-widget__overlayEnter .3s;
}

.ckwdg-is_closing .ckwdg-widget__overlay {
    animation: ckwdg-widget__overlayLeave .3s;
    pointer-events: none;
}

@keyframes ckwdg-widget__overlayEnter {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }
}

@keyframes ckwdg-widget__overlayLeave {
    100% {
        background-color: rgba(0, 0, 0, 0);
    }
}

.ckwdg-widget__widget {
    display: flex;
    flex-direction: column;
    max-height: 85%;
    background: #fff;
    position: relative;
    width: 606px;
    max-width: 100%;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    animation: ckwdg-widget__widgetEnter .3s;
}

.ckwdg-is_closing .ckwdg-widget__widget {
    animation:...

JavaScript

(function() {

    var w = window,
        d = document,
        $b = d.body,
        qs = function(arg1, arg2) {
            if (arg2) {
                return arg1.querySelector(arg2);
            }
            return d.querySelector(arg1);
        },

        scopeQs = (function() {
            var $scope = qs('.ckwdg-scope');

            return function(arg1, arg2) {
                if (arg2) {
                    return arg1.querySelector(arg2);
                }
                return $scope.querySelector(arg1);
            };
        })(),

        ael = function(el, evt, listener, uc) {
            return el.addEventListener(evt, listener, uc);
        },

        animationEvent = (function() {
            var t,
                el = document.createElement("fakeel");

            var transitions = {
                "animation": "animationend",
                "OAnimation": "oAnimationEnd",
                "MozAnimation": "animationend",
                "WebkitAnimation": "webkitAnimationEnd"
            };

            for (t in transitions) {
                if (el.style[t] !== undefined) {
                    return transitions[t];
                }
            }
        })();

    function minimumTime(min_time) {
        min_time = min_time || 2000;
        var start_time = new Date();

        return  {
            after: function(cb) {
                var diff = new Date() - start_time;

                if (diff >= min_time) {
                    cb();

                } else {
                    setTimeout(function() {
                        cb();
                    }, min_time - diff);
                }
            }
        };
    }


    function ajaxGet(url, success, error, always, min_time) {
        var MinTime = minimumTime(min_time);

        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        xhr.open('GET', url);

        xhr.onreadystatechange = function() {
           ...