JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Click into this area and use Enter to switch mode</h1>

CSS

#cc-comic {
  width: 200px;
}

JavaScript

// Uses cache buster so that this sample can be run many times by just re-running the fiddle
$("<img id='cc-comic'/>").attr("src", "http://www.angelfire.com/rnb/weatherpics/telaviv_high_res.jpg?_=" + new Date().valueOf()).appendTo("body");

var state = false;

var $s, $c;
var setState = function(readModeEnabled) {
    if($s) {
        $s.remove();
        $s = null;
    }
    if($c) {
        $c.remove();
        $c = null;
    }
    if(readModeEnabled) {
    		// The $s trick using the ID there was used only because I noticed
        // that $("<style>something</style>").appendTo(...) didn't set the
        // content of the style tag correctly, but
        // $(...).append("<style>something</style>") does.
        $("head").append("<style id='cherry-read-mode'>*{display:none !important;} html,body{display:block !important;width:100%;height:100%;text-align:center;overflow:hidden;} #cc-comic-2{display:inline-block !important;max-width:100%;max-height:100%;}");
        $s = $("#cherry-read-mode");
        $c = $("<img id='cc-comic-2'/>").attr("src", $("#cc-comic").attr("src"));
        $("body").append($c);
    }
};

$("body").keydown(function(e) {
		if(e.keyCode == 13) {
    		state = !state;
        setState(state);
    }
});