<div class="confirm">
  <i class='close'>×</i>
  <h1><i class="fa fa-check-circle fa-3x"></i>Boom! Profile Created</h1>
</div>
<form action="#">
  <h1>
    Create User Profile
    <br>
    <i class="fa fa-camera-retro fa-lg"></i>
  </h1>
  
  <div class="float-label">
    <input type="text" name="f-name" id="f-name" />
    <label for="f-name">Name</label>
  </div>
  
  <div class="float-label">
    <input type="email" name="email" id="email" />
    <label for="email">Email</label>
  </div>
    
  <div class="float-label">
    <i class="fa fa-caret-down"></i>
    <select id="units" name="units">
      <option value=""></option>
      <option value="imperial">Imperial (lbs)</option>
      <option value="Metric">Metrtic (Kg)</option>
    </select>    
    <label for="units"> Units</label>
  </div>
  
  <!--Row-->
  <div class='row'>
    <div class="float-label">
      <i class="fa fa-caret-down"></i>
      <select name="gender" id="gender">
        <option value=""></option>
        <option value="male">Male</option>
        <option value="Female">Female</option>
      </select>
      <label for="gender">Gender</label>
    </div>
    
    <div class="float-label">
      <input type="number" name="age" id="age" maxlength="2" />
      <label for="age">Age</label>
    </div>
    
    <div class="float-label">
      <i class="fa fa-caret-down"></i>
      <select name="height" id="height">
        <option value=""></option>
        <option value="5-1">5'1"</option>
        <option value="5-2">5'2"</option>
        <option value="5-3">5'3"</option>
        <option value="5-4">5'4"</option>
        <option value="5-5">5'5"</option>
        <option value="5-6">5'6"</option>
        <option value="5-7">5'7"</option>
        <option value="5-8">5'8"</option>
        <option value="5-9">5'9"</option>
        <option value="6-0">6'0"</option>
        <option value="6-1">6'1"</option>
        <option value="6-2">6'2"</option>
        <option value="6-3">6'3"</option>
        <option value="6-4">6'4"</option>
        <option value="6-5">6'5"</option>
        <option value="6-6">6'6"</option>
        <option value="6-7">6'7"</option>
        <option value="6-8">6'8"</option>
        <option value="6-9">6'9"</option>
        <option value="7-0">7'0"</option>
      </select>
      <label for="height">Height</label>
    </div>
    <!--//row-->
  </div>
  <div class="float-label">
    <fa class="fa eye fa-eye-slash"></fa>
    <input type="password" name="pw" id="pw" />
    <label for="pw">Password</label>
  </div>
  
  <div class="float-label">
    <textarea name="notes" id="notes"></textarea>
    <label for="notes">Notes</label>
  </div>
  <button class="btn" type="submit">Submit</button>
  <button class="btn" id="clear" type="reset" value="Reset">Reset</button>
</form>  
@import "compass";
@import "compass/reset";
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);

*{
  @include box-sizing(border-box);
}
html, 
body{
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body{
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  @include background-image(linear-gradient(to bottom right,#2CCABA, #1EC68D));
  color: #fff;
}
.confirm{
  position: absolute;
  width: 100%;
  height: 100%;
  color: #2ecc71;
  background-color: #fff;
  z-index: 100;
  text-align: center;
  @include scale(0);
  @include opacity(0);
  @include transition(all .4s ease);
  &.show{
     @include scale(1);
     @include opacity(1);
  }
  .close{
    position: absolute;
    right: 20px;
    top: 20px;
    color: rgba(0,0,0,.2);
    font-size: 60px;
    display: inline-block;
    padding: 20px;
    cursor: pointer;
    &:hover{
      color: rgba(0,0,0,.7);
    }
  }
  h1{
    margin: 0 auto;
    margin-top: 35vh;
    display:inline-block;
    font-size: 48px;
    line-height: 1;
    .fa{
     display:block; 
    }
  }
}
form{
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.row{
  >div{
    width: 33.33333333333333%;
    display:inline-block;
    margin-right:-5px;
    position: relative;
    &:after{
      content: '';
      border-right: 1px solid rgba(255,255,255,.7);
      position: absolute;
      top: 3px;
      height: 75%;
      right: -3px;
    }
    &:last-child:after{
      display:none;
    }
  }
}
h1{
  font-weight: 300;
  font-size: 26px;
  line-height: 3;
  margin-bottom: 25px;
  text-align: center;
  .fa-camera-retro{
    $size: 100px;
    width: $size;
    height: $size;
    line-height: $size;
    border: 2px solid #fff;
    cursor: pointer;
    @include border-radius(50%);
    @include transition(background-color .3s ease);
    &:hover{
      background-color: rgba(255,255,255,.2);
    }
  }
}

.btn{
  font-family: 'Lato', sans-serif;
  border: none;
  width: 100%;
  display:block;
  padding: 15px;
  background-color: #fff;
  font-size: 18px;
  color: #2ecc71;
  cursor: pointer;
  @include transition(all .3s ease);
  @include border-radius(0);
  &:hover,
  &:focus{
    color: #333;
    outline: none;
  }
}
#clear{
  background: none;
  color: #fff;
  font-weight: 100;
}

//Float Label main style
.float-label{
  position: relative;
  margin-bottom: 10px;
  label,
  & input,
  & select,
  & textarea{
    font-family: 'Lato', sans-serif;  
    font-size: 24px;
    font-weight: 300;
  }
  & input,
  & select,
  & textarea{
    //Reset styles
    -webkit-appearance: none;
    outline:none;
    border: none;
    width: 100%;
    display:block;
    cursor: pointer;
    @include border-radius(0);
    
    //Main style
    font-family: 'Lato', sans-serif;  
    font-size: 24px;
    border-bottom: 1px solid rgba(255,255,255,.7);
    background: transparent;
    color: #fff;
    padding: 15px 20px 10px 10px;
  }
  label{
    position: absolute;
    left: 10px;
    top: 18px;
    color: #fff;
    pointer-events: none;
    @include transition(all .2s ease);
    &.active{
      font-size: 14px;
      font-weight: 400;
      top:-1px;
      color: rgba(0,0,0,.7);
    }
  }
  textarea{
    height: 100px;
    resize: none;
  }
  //position Icons
  .fa{
     position: absolute;
     right: 5px;
     bottom: 20px;
     font-size: 12px;
    &.eye{
      right:0;
      bottom:2px;
      z-index: 10;
      padding: 20px;
      padding-right:0;
      font-size: 16px;
      cursor:pointer;
      color: rgba(0,0,0,.5);
      &.show{
        color: rgba(255,255,255,.9);
      }
    }
  }
}

@media(max-width: 320px) {
    .row > div{
      display: block;
      width: auto;
      &:after{
        display:none;
      }
    }   
}

View Compiled
(function($){
	function floatLabel(inputType){
		$(inputType).each(function(){
			var input = $(this).find("input, select, textarea");
      var label = $(this).find("label");
			// on focus add cladd active to label
			input.focus(function(){
				input.next().addClass("active");
        console.log("focus");
			});
			//on blur check field and remove class if needed
			input.blur(function(){
				if(input.val() === '' || input.val() === 'blank'){
					label.removeClass();
				}
			});
		});
	}
	// just add a class of "floatLabel to any group you want to have the float label interactivity"
	floatLabel(".float-label");
  
  
//////  Just a bunch of fluff for other interactions  ////////////////////////////////////////////////////////  
  
  //for the pw field - toggle visibility
  $(".eye").on("click" , function(){
    var $this = $(this);
    if( !$this.is(".show") ){
      $this.addClass("show")
           .removeClass("fa-eye-slash")
           .addClass("fa-eye").next()
           .attr("type" , "text");
    }else{
      $this.removeClass("show")
           .addClass("fa-eye-slash")
           .removeClass("fa-eye")
           .next().attr("type" , "password");
    }
  });
  
  //modal close
  $(".close").on("click" , function(){
    $(this).parent().removeClass("show");
    $("#clear").click();
  })
  
  //submit button dirty validation ^-^
  $("button[type='submit']").on("click" , function(){
    if( !$("input, select, textarea").val() ){ 
      $(this).text("Please enter all Fields");
    }else{
      $(".confirm").addClass("show");
    }
    return false;
  })
  //just for reset button
  $("#clear").on("click" , function(){
    $(".active").removeClass("active");
  });
  
})(jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js