JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<p>
Mash the spacebar here.
</p>
<div id="window">
<p>
Please don't crash me, sir!
</p>
</div>

CSS

#window.fade-in {
	opacity: 1;
}

#window {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
  background: #000;
  width: 400px;
  height: 400px;
  color: #fff;
}

JavaScript

document.onkeydown = function(e) {
    var windowElement = document.getElementById('window');
    var windowClass = windowElement.className;
    switch (e.keyCode) {
        // Spacebar
        case 32:
            if ( windowClass.indexOf( 'fade-in' ) != -1 ) {
               windowElement.className = "";
            } else {
               windowElement.className = "fade-in";
            }
            break;
    }
};