JSFiddle - React, Tailwind, and code Playground

by CrazyDave2345

HTML

<div id='maincontainer' class='borderbox'>
    <!--Remember to use the CSS loading icon!><!-->
    <header class='smallborderbox' id='header'>
        <div class='smallborderboxtext'>Header!</div>
        <img src='https://cdn3.iconfinder.com/data/icons/token/128/Gear.png' id='headergearimage' />
    </header>
    <div id='infobox'>
        <section class='borderbox'>
            <img src='http://imgh.us/default(1).svg' id='statusimage' />
            <div class='verticalalign' id='connectionstatustext'>Connected</div>
            <div id='cornerbox'>
                <img src='https://i.imgur.com/7kG4U39.png' id='cornerimage' />
                <div id='cornertext'>Cancel</div>
            </div>
        </section>
        <aside class='borderbox'>
            <div class='boxheader'>ETA</div> <span class='verticalalign'>Unknown</span>

        </aside>
    </div>
    <div id='compaitability message'>
        <!--Compaitability>
<!--[if lte IE 7]>
<script>var msg = 'The version of Internet Explorer appears to be outdated. The webpage may look weird and you should update your browser to at least IE 9 or the recommended IE 10 or greater.'</script>
<![endif]-->
        <!--[if IE 8]>
            <script>
                var msg = 'We reccomend you upgrade your version of internet explorer.'
            </script>
        <![endif]-->
        <noscript>Insert Name Here requires Javascript to operate. Please enable it in your browser</noscript>
    </div>
</div>

CSS

#header {
    font-size: 3.3vw;
}
#cancelretry {
    /* Hidden objects do not show pointer on hover */
    visibility:" hidden";
    cursor: pointer;
    font-size: 1.1vw;
}
#headergearimage {
    position: relative;
    width: 4vw;
    top: 8%;
}
.boxheader {
    position: relative;
    left: 10%;
    top: 15%;
    transform: translateX(-20%);
    transform: translateY(-20%);
}
.verticalalign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
section {
    float: left;
}
aside {
    float: right;
}
.borderbox {
    border-radius: 3%;
}
.smallborderbox {
    border-radius: 1%;
    background: #2db34a;
    margin: 1%;
    padding: 5%;
}
.smallborderboxtext {
    font-family:'arial';
    text-align: center;
}
section, aside {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    font-family:'arial';
    background: #2db34a;
    margin: 1%;
    padding: 4%;
    vertical-align: middle;
    font-size: 3.3vw;
    height: 20vh;
    width: 40%;
}
#statusimage {
    float: left;
    top: 50%;
    width: 5vw;
    position: relative;
    transform: translateY(-50%);
}

JavaScript

// Simple Constants
var emptyfunc = function () {};

// Declare Variables
var isOnline = false;
var retries = 0;
var keepRetrying = false;
var cornerBoxMode = 'cancel';
var currentRequests = [];
var refreshConnectionIntervalId;

// Constants
var imageCheck = 'https://i.imgur.com/jRyYd5G.png';
var imageX = 'https://i.imgur.com/7kG4U39.png';
var imageLoading = 'http://imgh.us/default(1).svg';


function refreshOnlineStatus(callback, timeout) {
    // Should be in external library
    timeout = timeout || 3;
    requestObject = $.ajax({
        url: "http://jsfiddle.net/echo/js/",
        timeout: timeout,
        complete: function (callback, jqXHR, textStatus) {
            callback(textStatus);
        }.bind(undefined, callback)
    });
    // Append the XMLHttpRequest object returned by jQuery to the list of current requests
    currentRequests.push(requestObject);
}

function updateImageCallback(textStatus) {
    if (textStatus == 'success') {
        src_url = imageCheck;
        document.getElementById('connectionstatustext').innerHTML = 'Connected';
        retries = 0;
    } else if (textStatus == 'timeout') {
        src_url = imageLoading;
        retries += 1;
    } else if (textStatus == 'failure') {
        src_url = imageX;
        retries += 1;
    }
    document.getElementById('statusimage').src = src_url;
}

var onCurrentTab = (function () {
    var stateKey, eventKey, keys = {
        hidden: "visibilitychange",
        webkitHidden: "webkitvisibilitychange",
        mozHidden: "mozvisibilitychange",
        msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function (c) {
        if (c) document.addEventListener(eventKey, c);
        return !document[stateKey];
    };
})();


function connectionCallback(textStatus) {
    updateImageCallback(textStatus);
    if (textStatus == 'success') {
        return;
    }...