JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
  Wunderlist Sync Status
</h1>

<div class="api-status">
    <div class="status">Determining API Status ...</div>
    <div class="speed"></div>
</div>

CSS

body {
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}
.api-status {
    padding: 20px 40px;
}
.api-status .status {
    font-size: 150%;
    font-weight: bold;
}
.api-status.online, .api-status.offline {
    color: white;
}
.api-status.online {
    background-color: green;
}
.api-status.offline {
    background-color: red;
}

JavaScript

var server = 'https://api.wunderlist.com/batch';

$.ajaxSetup({

    'contentType': 'application/json; charset=utf-8',
        'crossDomain': true,
        'dataType': 'json',
        'xhrFields': {
        'withCredentials': true
    }
});

function ajax(url, options) {

    if (typeof options.data === 'object') {

        options.data = JSON.stringify(options.data);
    }

    var request = $.ajax(url, {

        'type': options.type,
            'data': options.data,
            'headers': options.headers,
            'timeout': options.timeout
    });

    return request.done(function (data, textStatus, jqXHR) {

        if (typeof data === 'string') {
            data = JSON.parse(data);
        }

        options.success && options.success(data, textStatus, jqXHR);
    }).fail(options.error || $.noop);
};

function ping() {

    var userOnline = undefined;
    var start = new Date();
    var options = {

        'type': 'POST',
            'data': {},
            'timeout': 60000,
            'headers': {
            'Content-Type': 'application/json',
                'Authorization': 'Bearer'
        }
    };

    if ('onLine' in navigator) {

        userOnline = navigator.onLine;
    }

    options.success = options.error = function (data, textStatus, jqXHR) {

        var online = data.status === 401 ? true : false;
        var execTime = duration(start);
        displayStatus(online, execTime, userOnline);

        // auto check every 2 minutes
        window.setTimeout(ping, 120000);
    };

    if (userOnline || userOnline === undefined) {

        ajax(server, options);
    } else {

        displayStatus(undefined, undefined, userOnline);
    }
}

function displayStatus(online, execTime, userOnline) {

    var $container = $('.api-status');

    if (userOnline || userOnline === undefined) {

        $container.find('.status').text(online ? 'Online' : 'Offline');
        $container.toggleClass('online', online);
       ...