<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>

<div class="wrap">
  <h1>Rise</h1>
  <h3>I built something similar as an engineer on Identity.com</h3>
  <div>
    <label for="fname">First Name</label>
    <input id="fname" type="text" class="cool"/>
  </div>

  <div>
    <label for="lname">Last Name</label>
    <input id="lname" type="text" class="cool"/>
  </div>
  
  <div>
    <label for="email">Some Long Copy Goes Here</label>
    <input id="email" type="text" class="cool"/>
  </div>
</div>

body {
  font-family: 'Lato', sans-serif;
  color: white;
  background-color: teal;
}
h1 {
  font-size: 60px;
  margin: 0px;
  padding: 0px;
}
h3 {
  margin: 0px;
  padding: 0px;
  color: #999;
}

div.wrap {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}

div.wrap div {
  position: relative;
  margin: 50px 0;
}

label {
  position: absolute;
  top: 0;
  font-size: 30px;
  margin: 10px;
  padding: 0 10px;
  background-color: teal;
  -webkit-transition: top .2s ease-in-out, 
                      font-size .2s ease-in-out;
  transition: top .2s ease-in-out, 
              font-size .2s ease-in-out;
}

.active {
  top: -25px;
  font-size: 20px;
}

input[type=text] {
  width: 100%;
  padding: 20px;
  border: 1px solid white;
  font-size: 20px;
  background-color: teal;
  color: white;
} 

input[type=text]:focus {
  outline: none;
}

$('input').on('focusin', function() {
  $(this).parent().find('label').addClass('active');
});

$('input').on('focusout', function() {
  if (!this.value) {
    $(this).parent().find('label').removeClass('active');
  }
});