JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<header>
  <label>
    <input type=checkbox>
    Show overlay
  </label>
</header>
<div class=app>
  <p>Long content</p>
  <div class="overlay hidden"></div>
</div>

CSS

html, body { height: 100%; }
body { font-family: sans-serif; margin: 0; }

header {
  align-items: center;
  background: #20262e;
  color: white;
  display: flex;
  height: 50px;
  justify-content: flex-end;
  padding: 0 1em;
}

.app {
  background: white;
  height: calc(100% - 50px);
  overflow: auto;
}

p {
  background: cornflowerblue;
  height: 161%;
  margin: 1em;
  width: 38%;
}

.overlay {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 50px;  
  left: 0;
  right: 0;
  bottom: 0;
}

.hidden {
  display: none;
}

JavaScript

const overlay = document.querySelector('.overlay');
const toggleOverlay = _ =>
	overlay.classList.toggle('hidden');
  
document
	.querySelector('[type=checkbox]')
  .addEventListener('click', toggleOverlay);