Shaunakde/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.12.0.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style id="jsbin-css">
section#outputGroup
{
  background-color: #CCC;
}
</style>
</head>

<body>


  <section id="textGroup">
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></span>
  <input type="text" class="form-control" placeholder="Say Something!" aria-describedby="sizing-addon1">
</div>
    </section>


    <section id="outputGroup">
  <canvas id="outputCanvas">
    Outdated Browser
  </canvas>
      <div id="app">
        <div>
  </section>

<script id="jsbin-javascript">
var TextGroup = React.createClass({displayName: 'TextGroup',

clockTick: function(){
    date = new Date();
    s= date.getSeconds();
this.setState({work:s})
},

getInitialState: function(){
    date = new Date();
    s= date.getSeconds();
    return (
    {    work:s    });
  },

render:function(){
    return React.createElement("p", null, this.props.text, React.createElement("br", null), this.state)
},

componentDidMount: function(){
setInterval(this.clockTick,1000);
}


});

React.render(React.createElement(TextGroup, {text: "Shaun"}), document.getElementById("app"));
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.12.0.js"><\/script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"><\/script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"><\/script>

  <\!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<\!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<\!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"><\/script>

</head>

<body>


  <section id="textGroup">
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></span>
  <input type="text" class="form-control" placeholder="Say Something!" aria-describedby="sizing-addon1">
</div>
    </section>


    <section id="outputGroup">
  <canvas id="outputCanvas">
    Outdated Browser
  </canvas>
      <div id="app">
        <div>
  </section>

</body>
</html></script>

<script id="jsbin-source-css" type="text/css">
section#outputGroup
{
  background-color: #CCC;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var TextGroup = React.createClass({

clockTick: function(){
    date = new Date();
    s= date.getSeconds();
this.setState({work:s})
},

getInitialState: function(){
    date = new Date();
    s= date.getSeconds();
    return (
    {    work:s    });
  },

render:function(){
    return <p>{this.props.text}<br/>{this.state}</p>
},

componentDidMount: function(){
setInterval(this.clockTick,1000);
}


});

React.render(<TextGroup text='Shaun' />, document.getElementById("app"));

</script></body>
</html>

## jsbin.zetoco.css
section#outputGroup
{
  background-color: #CCC;
}

## jsbin.zetoco.js
var TextGroup = React.createClass({displayName: 'TextGroup',

clockTick: function(){
    date = new Date();
    s= date.getSeconds();
this.setState({work:s})
},

getInitialState: function(){
    date = new Date();
    s= date.getSeconds();
    return (
    {    work:s    });
  },

render:function(){
    return React.createElement("p", null, this.props.text, React.createElement("br", null), this.state)
},

componentDidMount: function(){
setInterval(this.clockTick,1000);
}


});

React.render(React.createElement(TextGroup, {text: "Shaun"}), document.getElementById("app"));
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://fb.me/react-0.12.0.js"></script>
	<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

	<style id="jsbin-css">
	section#outputGroup
	{
	background-color: #CCC;
	}
	</style>
	</head>

	<body>



	<section id="textGroup">
	<div class="input-group input-group-lg">
	<span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></span>
	<input type="text" class="form-control" placeholder="Say Something!" aria-describedby="sizing-addon1">
	</div>
	</section>



	<section id="outputGroup">
	<canvas id="outputCanvas">
	Outdated Browser
	</canvas>
	<div id="app">
	<div>
	</section>

	<script id="jsbin-javascript">
	var TextGroup = React.createClass({displayName: 'TextGroup',

	clockTick: function(){
	date = new Date();
	s= date.getSeconds();
	this.setState({work:s})
	},

	getInitialState: function(){
	date = new Date();
	s= date.getSeconds();
	return (
	{ work:s });
	},

	render:function(){
	return React.createElement("p", null, this.props.text, React.createElement("br", null), this.state)
	},

	componentDidMount: function(){
	setInterval(this.clockTick,1000);
	}


	});

	React.render(React.createElement(TextGroup, {text: "Shaun"}), document.getElementById("app"));
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//fb.me/react-0.12.0.js"><\/script>
	<script src="https://fb.me/JSXTransformer-0.13.3.js"><\/script>
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"><\/script>

	<\!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

	<\!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

	<\!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"><\/script>

	</head>

	<body>



	<section id="textGroup">
	<div class="input-group input-group-lg">
	<span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></span>
	<input type="text" class="form-control" placeholder="Say Something!" aria-describedby="sizing-addon1">
	</div>
	</section>



	<section id="outputGroup">
	<canvas id="outputCanvas">
	Outdated Browser
	</canvas>
	<div id="app">
	<div>
	</section>

	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">
	section#outputGroup
	{
	background-color: #CCC;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var TextGroup = React.createClass({

	clockTick: function(){
	date = new Date();
	s= date.getSeconds();
	this.setState({work:s})
	},

	getInitialState: function(){
	date = new Date();
	s= date.getSeconds();
	return (
	{ work:s });
	},

	render:function(){
	return <p>{this.props.text}<br/>{this.state}</p>
	},

	componentDidMount: function(){
	setInterval(this.clockTick,1000);
	}


	});

	React.render(<TextGroup text='Shaun' />, document.getElementById("app"));

	</script></body>
	</html>