JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="7800579771-40r2k8i2mia7olspqvvt0tb0muq5io47.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>


<div id="projectContainer">
  <div id="openingPanel" class="fullScreen" setBackgroundImage>
    <h1 class="logo">
      <img src="https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14832&authkey=!ANf39zZxrXSY1ik&v=3&ithint=photo%2cpng">
      <span>CloudEdit</span>
    </h1>
    <div id="registerOptionSuperContainer">
      <div id="registerOptionContainer">
        <input type="button" value="Register with Google">
        <input type="button" value="Register with Facebook">
        <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
        <script>
          function onSignIn(googleUser) {
            // Useful data for your client-side scripts:
            var profile = googleUser.getBasicProfile();
            alert("ID: " + profile.getId()); // Don't send this directly to your server!
            alert("Name: " + profile.getName());
            alert("Image URL: " + profile.getImageUrl());
            alert("Email: " + profile.getEmail());

            // The ID token you need to pass to your backend:
            var id_token = googleUser.getAuthResponse().id_token;
            console.log("ID Token: " + id_token);
          };

        </script>
      </div>
    </div>
  </div>
</div>
<div id="superOverlay"></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,300);
h1 {
  padding: 0;
  margin: 0;
}

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

* {
  font-family: 'lato', sans-serif;
  font-weight: 300;
}

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

#superOverlay {
  position: fixed;
  background-color: #000;
  opacity: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 1s ease;
}

#registerOptionSuperContainer {
  width: 100%;
  height: auto;
}

#registerOptionContainer {
  margin: auto;
  display: table;
  padding-top: 20vh;
  padding-bottom: 20vh;
}

.logo * {
  vertical-align: middle;
  font-size: 2rem;
}

.logo {
  width: 100%;
  text-align: center;
}

.fullScreen {
  width: 100%;
  height: 100%;
}

[setBackgroundImage] {
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}


/*<img src="https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14832&authkey=!ANf39zZxrXSY1ik&v=3&ithint=photo%2cpng">*/


/*
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',...

JavaScript

function initGlobals() {
  superOverlay = document.getElementById('superOverlay');
}

window.addEventListener('load', function() {
  var formStatus = {
    currentPanel: 0
  };
  initGlobals();
  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',...