JSFiddle - React, Tailwind, and code Playground

by turkey3

HTML

<body>
    <div id='fade' onclick="fade('out')">
        <div id='alert'>Example Message Example Message Example Message</div>
    </div>
    <div align=center>
        <button onclick='setup()' style='margin-top:1000px'>Button</button>
    </div>
</body>

CSS

body {
    background-color:blue;
    height:3000px;
}
#fade {
    position:fixed;
    z-index: 2750;
    display: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
}
#fade:hover {
    cursor: pointer;
}
#alert {
    font-size:1.1em;
    font-family:sans-serif;
    display: inline-block;
    margin: 5em 0;
    padding: 3em;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    z-index: 3000;
}
#alert > p {
    margin: .2em;
}

JavaScript

/*VARIABLE DECLARATIONS*/
var fading = 0;

window.shakeScreen = function() {
    var degrees = 0;
    var goal = 0;
    var goals = [5, -5, 4, -4, 3, -4, 2, -2, 1, -1, 0];

    function frame() {
        if (goals[goal] < 0) {
            degrees -= 1;
        } else {
            degrees += 1;
        }
        get('body', 'tag');
        current[0].style.transform = 'rotate(' + degrees + 'deg)';
        if (degrees === goals[goal]) {
            goal += 1;
            if (goal === goals.length) {
                clearInterval(intervalId);
            }
        }
    }
    var intervalId = setInterval(frame, 16);
}


/*OTHER FUNCTIONS USED*/
window.setup = function() {
    fade('in');
    shakeScreen();
}
window.get = function(reference, type) {
    switch (type) {
        case 'id':
            current = document.getElementById(reference);
            break;
        case 'class':
            current = document.getElementsByClassName(reference);
            break;
        case 'tag':
            current = document.getElementsByTagName(reference);
            break;
    }
}

window.fade = function(way) {
    if (fading == 0) {
        fading = 1;
        if (way === 'in') {
            var temp = 0;
            get('fade', 'id');
            current.style.display = 'block';
            get('alert', 'id');
            current.style.display = 'inline-block';
        } else {
            var temp = 100;
        }

        function frame() {
            if (way == 'in') {
                temp += 5;
            } else {
                temp -= 5;
            }
            get('fade', 'id');
            current.style.backgroundColor = 'rgba(0,0,0,' + (temp / 200) + ')';
            get('alert', 'id');
            current.style.backgroundColor = 'rgba(255,255,255,' + (temp / 150) + ')';
            if (temp % 100 === 0) {
                if (way === 'out') {
                    closeElement('fade');
                }
                fading = 0;
               ...