JSFiddle - React, Tailwind, and code Playground

by surfine

HTML

<div class="transition pa" style="top: -100%;">
    <div class="transitionWrap center pa"></div>
    <div class="pa center" style="display: none;">
    <img id="introSurfine" class="ib" src="http://i1282.photobucket.com/albums/a522/surfine/surfine_zpsxgzjl94l.png" />
        <div class="ib pr" style="top: -300px; left: 250px; color: #fff; overflow: none;">
            <span style="font-size: 2em">
                Once upon a time, there lived a sage.
            </span>
        </div>
    </div>
</div>
<div class="content">
    <div class="panelWhite pa center">
        <div class="panelWhiteHeader pr">SIGN IN</div>
        <form class="contentWrap pr" action="javascript:transition()">
            <input class="iWhite pr" type="text" placeholder="Username" />
            <input class="iWhite pr" type="password" placeholder="Password" style="margin-top: -1px;" />
            <button class="btnLarge pr" style="width: 100%; top: 5px;">Sign In</button>
            <br />
            <br />
            <br />Don't have an account yet? <a href="">Sign Up</a>

        </form>
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: #eee;
    font-family:"Lato", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a, a:visited {
    text-decoration: none;
    color: #4585f4;
}
.pr {
    position: relative;
}
.pa {
    position: absolute;
}
.pf {
    position: fixed;
}
.ib { display: inline-block; }
button {
    border: none;
}
.center {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.panelWhite {
    width: 350px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
}
.panelWhiteHeader {
    width: 100%;
    color: #137fc7;
    font-size: 24px;
    text-align: center;
    padding: 30px 30px 0 30px;
    box-sizing: border-box;
}
.contentWrap {
    padding: 30px;
    display: block;
}
.iWhite {
    padding: 17px;
    width: 100%;
    box-sizing: border-box;
    background: #fafafa;
    font-size: 16px;
    color: #000;
    border: 1px solid #d3d3d3;
    z-index: 1;
    display: block;
}
.iWhite:focus {
    border: 1px solid #137fc7;
    z-index: 2;
    outline: none;
}
.btnLarge {
    padding: 17px;
    min-width: 100px;
    box-sizing: border-box;
    background: #009688;
    color: #fff;
    font-weight: bold;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.transition {
    height: 100%;
    width: 100%;
    background: #00BCD4;
    z-index: 5;
}
.transitionWrap {
    color: #fff;
    font-size: 3em;
    line-height: 100%;
    text-align: center;
    display: none;
}

#introSurfine {
    width: auto !important;
    height: 300px !important;
}

@keyframes BluetoGray {
    from {background-color: 00BCD4;}
    to {background-color: #666;}
}

JavaScript

function transition() {
    $(".transition").animate({top: 0});
    window.setTimeout(function () {
        $(".transitionWrap").text("Hi there :)").fadeIn();
    },600);
    window.setTimeout(function () {
        $(".transitionWrap").fadeOut();
    },2600);
    window.setTimeout(function () {
        $(".transitionWrap").css("font-size", "2.5em").text("Welcome to the wondrous word of").fadeIn();
    },3600);
    window.setTimeout(function () {
        $(".transitionWrap").fadeOut();
    },5600);
    window.setTimeout(function () {
        $(".transitionWrap").css("font-size", "3.4em").text("HATCHLETS").fadeIn();
    },6600);
    window.setTimeout(function () {
        $(".transitionWrap").fadeOut();
        $(".transition").css({"animation": "BluetoGray 3s forwards"});
        $("#introSurfine").delay(1000).fadeIn(2000);
    },8600);
    window.setTimeout(function () {
        $(".transitionWrap").fadeOut();
        $(".transition").css({"animation": "BluetoGray 3s forwards"});
        $("#introSurfine").parent().delay(1000).fadeIn(2000);
    },8600);
}
transition();