JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu-main-menu" class="navbar">
    <li><a href="">option 1</a></li>
    <li><a href="">option 2</a></li>
</ul>

CSS

body {
    font-family:Arial;
    font-size:80%;
}

h1 {
    margin-bottom:100px;
}

.navbar li {
    background-color:#0a1;
    display:inline-block;
    width:16.6667%;
    text-align:center;
    padding:10px;
}

.navbar li a {
    color:#fff;
    font-size:12px;
    text-decoration:none;
}

JavaScript

/* Taken from https://gist.github.com/jerone/3487795 */
/* Ping */
$.extend($, {
    Ping: function Ping(url, timeout) {
        timeout = timeout || 1500;
        var timer = null;

        return $.Deferred(function deferred(defer) {

            var img = new Image();
            img.onload = function () {
                success("onload");
            };
            img.onerror = function () {
                success("onerror");
            }; // onerror is also success, because this means the domain/ip is found, only the image not;

            var start = new Date();
            img.src = url += ("?cache=" + +start);
            timer = window.setTimeout(function timer() {
                fail();
            }, timeout);

            function cleanup() {
                window.clearTimeout(timer);
                timer = img = null;
            }

            function success(on) {
                cleanup();
                defer.resolve(true, url, new Date() - start, on);
            }

            function fail() {
                cleanup();
                defer.reject(false, url, new Date() - start, "timeout");
            }

        }).promise();
    }
});

// Check if we can see site
$.Ping("http://www.google.com").done(function (success, url, time, on) {
    // Insert an extra menu item linking to the sign-in page
    $("#menu-main-menu").append('<li><a target="_blank" href="#">Sign in</a></li>');
    // Change the width of an li to accommodate the extra menu item
    $(".navbar li").css("width", "14.2857%");
});