JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="fadeIn()">
  <div class="text">
    <h1>Why are you here?</h1>
  </div>
  <div class="main">
    <div class="container">
      <img src="http://t15.deviantart.net/iy-wsIkQ2wP7g08wOsW4mi_daNM=/fit-in/700x350/filters:fixed_height(100,100):origin()/pre14/e387/th/pre/f/2010/096/1/b/dollars___logo_vector_by_xxkaiserxx.png" alt="dollars logo" id="logo">
      <form action="../php/index.php" method="post" id="form">
        <label for="password">PASSWORD:</label>
        <input type="password" name="password" id="password" maxlength="16" required>
        <input type="submit" name="submit" id="submit" required>
      </form>
    </div>
  </div>
</body>

CSS

* {
  font-family: helvetica;
  padding: 0px;
  margin: 0px;
}

body {
  height: 100vh;
  width: 100%;
  background-color: black;
}

.text {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". . ." ". center ." ". . .";
}

h1 {
  grid-area: center;
  color: white;
  justify-self: center;
  align-self: center;
  opacity: 0;
}

.main {
  display: none;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 12fr 1fr 1fr;
  grid-template-areas: ". logo ." ". form ." ". . ."
}

#logo {
  grid-area: logo;
  height: 0px;
}

#form {
  grid-area: form;
  justify-self: center;
}

#password {
  display: none;
  opacity: 0;
  height: 21px;
  width: 170px;
  border-style: none;
  border-radius: 6px;
  text-align: center;
  font-size: 24px;
}

label {
  color: white;
  padding-right: 3px;
  display: none;
  opacity: 0;
}

#submit {
  display: none;
}

JavaScript

function fadeIn() {
  var el = document.querySelector("h1");
  el.style.opacity = 1;
  el.style.transition = "opacity 1.0s linear 0s";
}

window.addEventListener("keypress", checkKeyPress, false);


function checkKeyPress(key) {
  var el = document.querySelector("h1");
  var el2 = document.querySelector(".main");
  var el3 = document.querySelector(".text");
  var el4 = document.getElementById("logo");
  if (key.keyCode == "36") {
    el.style.opacity = 0;
    setTimeout(function() {
      el.style.display = "none";
      el3.style.display = "none";
      el2.style.display = "inline";
      el4.style.height = "800px";
      el4.style.transition = "height 1.0s linear 0s";
    }, 1000);
  }
}