<div id="stage" class="stage"></div>
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);

//colors
$midnightblue: #2c3e50;
$belizehole: #2980b9;
$nephritis: #27ae60;
$peterriver: #3498db;

$primary: $belizehole;
$secondary: $midnightblue;

$bright: mix( $primary , white , 50% );
$brighter: mix( $primary , white , 0% );
$dark: mix( $secondary , black , 70% );
$darker: mix( $secondary , black , 60% );

%center-stage {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

%corners {
	border-radius: 5px;
}

%component {
	border-radius: 5px;
	background: linear-gradient( to right, darken( $darker , 1% ) , $darker );
	box-shadow: inset 3px 3px 15px -5px rgba( black , 0.1 );
	padding: 2em;
	display: block;
}

%button {
	background: $darker;
	display: inline-block;
	padding: 0.3em 1em 0.5em;
	cursor: pointer;
	background: linear-gradient( to right, darken( $darker , 1% ) , $darker );
	box-shadow: inset 3px 3px 15px -5px rgba( black , 0.1 );
	text-transform: uppercase;
	color: $nephritis;
	border: 1px solid rgba( $primary , 0.3 );
	font-size: 90%;

	&:focus {
		background: $peterriver;
		color: $brighter;
	}

	&:hover {
		background: $nephritis ;
		color: $brighter;
	}

	&:active {
		background: $darker ;
		color: $brighter;
	}

}

%shadow-inset {
	box-shadow: inset 3px 3px 10px rgba( black , 0.1 );
}

%transition {
	transition: all 0.2s ease-out;

	&:hover {
		transition: all 0.2s ease-in;
	}

}

* {
	position: relative;
	box-sizing: border-box;
}

html , body { height: 100%; }
*,
body {
	font-family: 'Inconsolata', sans-serif ;
	font-weight: 400;
}

body {
	font-size: 19px;
	line-height: 1.3em;
	background: linear-gradient( to left, darken( $dark , 1% ) , $dark );
	color: $bright;
}

form {
	@extend %component;
}

legend {
	font-size: 1.5em;
	margin-bottom: 1em;
	color: $primary;
}

label {
	@extend %transition;
	@extend %corners;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-20%) translateY(50%);
	background: rgba( $darker , 0.5 );
	border: 1px solid rgba( $primary , 0.5 );
	padding: 0 1em 0.2em;
	display: block;
	cursor: pointer;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

input,
textarea {
	@extend %transition;
	font-size: 100%;

	&:focus {
		outline: none;
		border: 1px solid $primary;
		background: $darker;
		box-shadow: inset 3px 3px 10px 0 rgba( black , 0.1);
	}
  
  &:focus,
  &.active {
     + label {
        background: $primary;
        transform: translateX(-20%) translateY(-50%);
      } 
  }

}

::-webkit-input-placeholder { 
	color: rgba( $primary , 0.3 );
}

[type="text"],
[type="email"],
textarea  {
	@extend %corners;
	border: none;
	background: inherit;
	color: $bright;
	border: 1px solid rgba( $primary , 0.3 );
	padding: 1em 0.5em 0.5em;
	width: 100%;

	-webkit-filter: blur(5px);

	&:focus,
  &.active {
		-webkit-filter: blur(0px);
	}

}

[type="submit"] {
	@extend %corners;
	@extend %button;
}

.control {
	margin-bottom: 1.3em;
}

.stage {
	@extend %center-stage;
	max-width: 500px;
	width: 80%;
}
View Compiled
var NameInput = React.createClass({displayName: "NameInput",
    handleTextChange: function(){
        var x = this.refs.nameField.getDOMNode().value;
        
        if(x != ''){
            this.refs.nameField.getDOMNode().className = 'active';
        } else {
            this.refs.nameField.getDOMNode().className = '';
        }

        this.props.onUserInput(x);
    },
    render: function(){
        return (
            React.createElement("div", {className: "control"}, 
                React.createElement("input", {type: "text", id: "name", ref: "nameField", placeholder: "What should I call you?", autoFocus: true, required: true, onChange: this.handleTextChange}), 
                React.createElement("label", {for: "name"}, "Name")
            )
        )
    }
});

var EmailInput = React.createClass({displayName: "EmailInput",
    handleTextChange: function(){
        var x = this.refs.emailField.getDOMNode().value;
        
        if(x != ''){
            this.refs.emailField.getDOMNode().className = 'active';
        } else {
            this.refs.emailField.getDOMNode().className = '';
        }

        this.props.onUserInput('', x);
    },
    render: function(){
        return (
            React.createElement("div", {className: "control"}, 
                React.createElement("input", {type: "email", id: "email", ref: "emailField", placeholder: "Where can I reach you?", required: true, onChange: this.handleTextChange}), 
                React.createElement("label", {for: "email"}, "e-mail")
            )
        )
    }
});

var MessageArea = React.createClass({displayName: "MessageArea",
    handleTextChange: function(){
        var x = this.refs.messageBox.getDOMNode().value;
        
        if(x != ''){
            this.refs.messageBox.getDOMNode().className = 'active';
        } else {
            this.refs.messageBox.getDOMNode().className = '';
        }

        this.props.onUserInput('', '', x);
    },
    render: function(){
        return (
            React.createElement("div", {className: "control"}, 
                React.createElement("textarea", {id: "message", ref: "messageBox", placeholder: "What's on your mind?", required: true, onChange: this.handleTextChange}), 
                React.createElement("label", {for: "message"}, "Message")
            )
        )
    }
});

var ContactForm = React.createClass({displayName: "ContactForm",
    getInitialState: function() {
        return {
            nameText: '',
            emailText: '',
            messageText: ''
        };
    },
    handleUserInput: function(nameText, emailText, messageText) {
        this.setState({
            nameText: nameText,
            emailText: emailText,
            messageText: messageText
        });
    },
  render: function(){
    return (
         React.createElement("form", {action: "/"}, 
        
            React.createElement("fieldset", null, 
                React.createElement("legend", null, "Contact me."), 
                
                React.createElement(NameInput, {onUserInput: this.handleUserInput}), 
                React.createElement(EmailInput, {onUserInput: this.handleUserInput}), 
                React.createElement(MessageArea, {onUserInput: this.handleUserInput}), 
                
                React.createElement("input", {type: "submit", value: "send"})
            )

        )
        );
  }
});

React.render(React.createElement(ContactForm, null), document.getElementById('stage'));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.min.js