JSFiddle - React, Tailwind, and code Playground

HTML

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="landing">
<section class="topslot">
	<div class="wrapper">
		
		<div class="brief">
			<h1>XXX</h1>
      <p><span id="verb">continue</span> your adventure</p>
		</div>
		
	</div>
</section>

<section>
	<div class="main">
    <form>
      <input placeholder="username" name="username" id = "userBox" type="text" />
      <input placeholder="password" name="password" type="password" value="" />
      <div class="signup-fields">

      </div>
      <input id="submit" type="submit" value="log in" />
    </form>

    <div class="extras">
      <a id="signup" href="#">sign up</a>
    </div>

	</div>
		
</section>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
body {
  font-family: "Open Sans";
  background: #27AE60;
  height: 100vh;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

.topslot {
  background-image: url("http://i.imgur.com/UkKDCJy.jpg");
  background-color: #229955;
  background-position: center;
  background-size: cover;
  padding: 1rem 0rem 6rem 0rem;
  box-shadow: 0em -4em 8em -4em rgba(0, 0, 0, 0.5) inset;
  border-bottom: 0.3rem solid #1f618d;
}

.brief {
  display: block;
  color: #fff;
  font-size: 4rem;
  font-weight: 400;
  text-align: center;
  margin: 2rem 0rem 0rem;
}
.brief h1 {
  font-size: 5rem;
  margin: 0rem;
}
.brief p {
  margin: 0rem;
  font-style: italic;
  font-weight: 300;
  font-size: 1.09rem;
}

form {
  padding: 1rem;
  background: #fff;
  border-radius: 0.25rem;
  box-shadow: 0rem 0.3rem 1rem 0.1rem rgba(0, 0, 0, 0.35);
}

input {
  margin-bottom: 1rem;
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input:not([type=submit]) {
  text-align: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.15rem;
  border: 2px solid #1f618d;
  box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.15) inset;
  font-size: 1.5rem;
  font-weight: 300;
  width: 100%;
}
input:not([type=submit]):focus {
  border-left-width: 0.5rem;
}

input[type=submit] {
  border: 0rem;
  width: 100%;
  background-color: #27AE60;
  color: white;
  margin-bottom: 0rem;
  font-size: 1.4rem;
  padding: 0.3rem 0rem;
  -moz-transition: background 0.5s ease;
  -o-transition: background 0.5s ease;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s ease;
}
input[type=submit]:hover {
  cursor: pointer;
  background-color: #3498db;
}
body {
    background-color: #3498db;
}
input[type=submit]:active {
  -webkit-transition-duration: 0s;
  background-color: #3498db;
}

#signup.is-on {
  color: #fff;
}

.signup-fields {
  height: 0;
 ...

JavaScript

$(document).ready(function() {


$('#signup').click(function(){
  if($(this).hasClass("is-on"))
  {
     $(".signup-fields").slideUp();
    $(this).removeClass('is-on').html("sign up");
    $('.signup-fields').removeClass('is-on');
    $('#submit').attr('value','log in');
    $('#verb').html('continue');
  }
  else
  { 
    // $(".signup-fields").slideDown();
    $(this).addClass('is-on').html("nevermind, log in");
    $('.signup-fields').addClass('is-on');
    $('#submit').attr('value','sign up');
    $('#verb').html('begin');
  }
});
});