JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.adaptive_placeholder_input_container {
	position: relative;
}
.adaptive_input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 200px;
	height: 40px;
	border: 3px solid #aaaaaa;
	/*border-radius*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: 0 0 1em;
	padding: 1em;
	background: #fff;
	resize: none;
	outline: none;
	box-shadow: none;
}
.adaptive_input:focus {
	border-color: #00bafa;
}
.adaptive_input:focus + .adaptive_placeholder:before {
	color: #00bafa;
}
.adaptive_input:focus + .adaptive_placeholder:before, .adaptive_input:valid + .adaptive_placeholder:before {
	/*transition-duration*/
	-webkit-transition-duration: .2s;
	-moz-transition-duration: .2s;
	-o-transition-duration: .2s;
	transition-duration: .2s;
	/*transform*/
	-webkit-transform: translate(0, -16px) scale(0.9, 0.9);
	-moz-transform: translate(0, -16px) scale(0.9, 0.9);
	-ms-transform: translate(0, -16px) scale(0.9, 0.9);
	-o-transform: translate(0, -16px) scale(0.9, 0.9);
	transform: translate(0, -16px) scale(0.9, 0.9);
}
.adaptive_input:invalid + .adaptive_placeholder:before {
	content: attr(alt);
	box-shadow: none;
}
.adaptive_input + .adaptive_placeholder {
	pointer-events: none;
	line-height: 1em;
	position: absolute;
	left: 10px;
	top: 10px;
}
.adaptive_input + .adaptive_placeholder:before {
	font-family: Verdana, Geneva, sans-serif;
	content: attr(placeholder);
	display: inline-block;
	padding: 0 2px;
	color: #898989;
	/*transition*/
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	background-color: #ffffff;
}

JavaScript 1.7

/**
	 * @jsx React.DOM
	 */
    var Adaptive_Input = React.createClass({ 
    	handle_change: function(){
    		var new_text = this.refs.input.getDOMNode().value;
    		this.props.on_Input_Change(new_text);
    	},
    	render: function(){
    		return (
    				<div className='adaptive_placeholder_input_container'>
    					<input 
    						className="adaptive_input"
    						type="text" 
    						required="required" 
    						onChange= {this.handle_change}
    						ref="input"
    					></input>
    					<label
    						className="adaptive_placeholder"
    						alt={this.props.initial}
    						placeholder={this.props.focused}
    					></label>
    				</div>    			
    				);
    	}
    });
    
    var Form = React.createClass({
    	render: function(){
    		return (
    				<form>
    					<Adaptive_Input
    						initial={'Name Input'}
    						focused={'Name Input'}
    						on_Input_Change={this.props.handle_text_input}
    					/>
    					<Adaptive_Input
							initial={'Value 1'}
							focused={'Value 1'}
    						on_Input_Change={this.props.handle_value_1_input}
    					/>
    					<Adaptive_Input
    						initial={'Value 2'}
    						focused={'Value 2'}
    						on_Input_Change={this.props.handle_value_2_input}
    					/>
    				</form>
    				);
    	}
    });
    
    var Page = React.createClass({
    	getInitialState: function(){
    		return {
    			Name : "No Name",
    			Value_1 : '0',
    			Value_2 : '0',
    			Display_Value: '0'
    		};
    	},
    	handle_text_input: function(new_text){
    		this.setState({
    				Name: new_text
    			});
    	},
    	handle_value_1_input: function(new_value){
    		new_value = parseInt(new_value);
    		var updated_display = new_value + parseInt(this.state.Value_2);
    		updated_display = updated_display.toString();
    		this.setState({
    				Value_1: new_value,
    				Display_Value: updated_display 
    			});
    	},
    	handle_value_2_input: function(new_value){
   ...