JSFiddle - React, Tailwind, and code Playground

by Sgoettschkes

HTML

<div id="header"> Header </div>
<div id="dimmer">&nbsp;</div>
<div id="footer"> footer </div>

<div id="content">I'm some content</div>

CSS

html,body{
  width:100%;
  height:100%;   
}
#header {width:100%;height:50px; background:yellow; position:absolute;top:0;left:0; z-index:10;}
#footer {width:100%;height:50px; background:red; position:absolute;bottom:0;left:0; z-index:10;}
#dimmer{ position:absolute; height: 100%; width: 100%; background-color:black; opacity:0.5; z-index:5;}
#content{width:200px;height:50px;background:blue; position:absolute;top:100px;left:0; z-index:1;}

JavaScript

$('body').click(function() {
    $('#header').toggle();
    $('#footer').toggle();
    $('#dimmer').toggle();
});