JSFiddle - React, Tailwind, and code Playground

by sam galison

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<div class="start">
  <h1>click one:</h1>
  <h2>first</h2>
  <h2>second</h2>
  <h2>third</h2>
  <h2>fourth</h2>
</div>
<div class="overlay hidden">

</div>

CSS

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,255,255,0.7);
}

.overlay p {
    text-align: center;
    margin-top: 10vh;
    font-size: 24px;
    font-family: monospace;
}

.hidden {
  visibility: hidden;
}

JavaScript

var overlay = document.querySelector(".overlay");

var clickers = document.querySelectorAll(".start h2");

_(clickers).each(function(element, number) {
  element.addEventListener("click", function() {
    make_overlay(element.innerText);
  });
});

function make_overlay(filler) {
  var text = document.createElement("p");
  text.innerText = "this is the " + filler + " individual thing (click again to close)";

  overlay.innerHTML = "";
  overlay.appendChild(text);

  overlay.classList.remove("hidden");

}

overlay.addEventListener("click", function() {
  this.classList.add("hidden");
});