JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<img src="http://www.h3manth.com/Hemanth.HM.jpg" style="max-width:100%;" alt="Milford Sound in New Zealand">

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) { document.images[0].classname="offline" });
window.addEventListener('offline',function(evt) { document.images[0].classname='' });