JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<img src="http://www.h3manth.com/Hemanth.HM.jpg" style="max-width:100%;"
id="test">

CSS

img.offline {
  filter: grayscale(100%);
  /* Current draft standard */
  -webkit-filter: grayscale(100%);
  /* New WebKit */
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: gray;
  /* IE */
  -webkit-filter: grayscale(1);
  /* Old WebKit */
}

JavaScript

window.addEventListener('online', function (evt) {
  console.log("offline");
  document.getElementById('test').classname = "offline";
});
window.addEventListener('offline', function (evt) {
  document.getElementById('test').classname = "";
});