JSFiddle - React, Tailwind, and code Playground

by kobi

HTML

<input type="button" value="allways" id="buttonOffline" />
<input type="button" value="online only" id="buttonOnline" />

<div class="ShowWhenOffline">Offline!</div>

CSS

.ShowWhenOffline {display:none; background-color:#f44;
    border:solid 1px #800; padding:5px;margin:5px;}
.Offline .ShowWhenOffline {display:block;}

JavaScript

var buttonOnline = document.getElementById("buttonOnline");
//var buttonOffline = document.getElementById("buttonOffline");

document.body.addEventListener("offline", function () {
    buttonOnline.disabled = true;
    document.body.className += " Offline";
}, false);
document.body.addEventListener("online", function () {
    buttonOnline.disabled = false;
    document.body.className = document.body.className.replace(/\s+Offline\b/,'');
}, false);