JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="imagePreloading"></div>
<div id="projectContainer">
  <header id="logo"><img src="https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14832&authkey=!ANf39zZxrXSY1ik&v=3&ithint=photo%2cpng"><span>CloudEdit</span></header>
  <div class="formElement" style="display:block;">
    <div class="overlay"></div>
    <div class="formElementContent">
      <div class="centered">
        <div class="inputContainer">
          <span class="label">First Name:</span>
          <input id="firstName" type="text">
        </div>
        <div class="inputContainer">
          <span class="label">Last Name:</span>
          <input type="text" id="lastName">
        </div>
      </div>
    </div>
  </div>
  <div class="formElement">
    <div class="overlay"></div>
    <div class="formElementContent">
      testing
    </div>
  </div>
  <div class="formElement">
    <div class="overlay"></div>
    <div class="formElementContent">
      testing
    </div>
  </div>
  <div class="formElement">
    <div class="overlay"></div>
    <div class="formElementContent">
      testing
    </div>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
  font-family: 'lato', sans-serif;
  color: #fff;
  font-weight: 400;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 18px;
}

.formElement {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: none;
}

#projectContainer {
  width: 100%;
  height: 100%;
}

#imagePreloading {
  position: fixed;
  bottom: 100000px;
  bottom: 100000vh;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: .2;
}

.formElementContent {
  position: relative;
  z-index: 10;
  top: 50%;
  -o-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  text-align: center;
}

.formElementContent * {
  margin: auto;
}

#logo {
  font-size: 5vh;
  color: #fff;
  position: absolute;
  z-index: 100000;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  padding-top: 2vh;
}

#logo img {
  vertical-align: middle;
}

.inputContainer {
  display: table;
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.inputContainer .label {
  display: block;
  text-align: left;
  font-size: 1rem;
}

input[type="text"] {
  border: 0;
  outline: none;
  padding: 4px;
  background-color: #000;
  background-color: rgba(0, 0, 0, .5);
  font-size: 1rem;
  transition: all .2s ease;
}

input[type="text"]:focus {
  background-color: #000;
  background-color: rgba(0, 0, 0, .4);
}

.next {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-block;
  margin-left:...

JavaScript

window.addEventListener('load', function() {
  document.getElementsByTagName('head')[0].innerHTML += '<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="viewport" content="initial-scale=1, maximum-scale=1">';
  var backgroundImages = ['https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14828&authkey=!AMerZviha9knZFA&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14821&authkey=!AOEMQ3T5LnTLE_4&v=3&ithint=photo%2cJPG', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14824&authkey=!AKWs-sGUiLmPdII&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14818&authkey=!AGcQR-1z06yg16E&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14817&authkey=!AFtQWzk7_aDFkmU&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14827&authkey=!AN2uN6GGmukQFwM&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14822&authkey=!ABb-GAtzzMpHW94&v=3&ithint=photo%2cJPG', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14814&authkey=!AOoSsImIa51x5ws&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14820&authkey=!AAWTJAJGRXYAh0o&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14830&authkey=!ANl4YshQXNnlrQ8&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14829&authkey=!ACwvr0qfzUWIVMM&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14823&authkey=!AO8VQb429okQyyY&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14826&authkey=!ADKKDFGTBlPwgXM&v=3&ithint=photo%2cJPG', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14816&authkey=!ACDqTeHgR2DREsk&v=3&ithint=photo%2cjpg', 'https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14825&authkey=!AKYkMpx5pvdc4_A&v=3&ithint=photo%2cJPG',...