React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.gradientme {background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #8f0222 44%, #6d0019 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#8f0222 44%,#6d0019 100%);
background: linear-gradient(to bottom, #ffffff 0%,#8f0222 44%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#6d0019',GradientType=0 );}

div.label {
  padding:10px;
}

JavaScript 1.7

var Hello = React.createClass({
  render: function() {
  	return <div>
    <div style={{float:"left"}}><table style={{width:"550px"}} className="table table-bordered table-striped">
    <tbody>
    {this.props.stories.map(function (story) {
    	return <tr style={{height: storyToHeight(story)}} key={story.story}><td>{story.story}</td></tr>;
    })}    
    </tbody>
    </table></div>
    
    <div style={{float:"left",width:"100px"}}>
    <div className="gradientme" style={{height:this.props.stories.map(storyToHeight).reduce((p,c)=> p+c),position:"relative"}}>
        	
          <div className="label" style={{color:"white",bottom:"50%",position:"absolute"}}>{this.props.budget.time / 2 + ' days ' + '($' + this.props.budget.time / 2 * this.props.budget.dayRate + ')'}</div>
          
          <div className="label" style={{color:"white",bottom:"75%",position:"absolute"}}>{this.props.budget.time / 4 + ' days ' + '($' + this.props.budget.time / 4 * this.props.budget.dayRate + ')'}</div>
          
          <div className="label" style={{color:"white",bottom:"25%",position:"absolute"}}>{this.props.budget.time * 0.75 + ' days ' + '($' + this.props.budget.time * 0.75 * this.props.budget.dayRate + ')'}</div>
          
          <div className="label" style={{color:"white",bottom:"5px",position:"absolute"}}>{this.props.budget.time + ' days ' + '($' + this.props.budget.time * this.props.budget.dayRate + ')'}</div>
        </div></div>
    </div>;
  }
});

function storyToHeight(story) {
	return story.effort *  20;
}

var data = [
{"story":"In order to not lose data as a computer user I want to be able to save backups of selected files", "effort": 6},{"story":"In order to not lose data as a computer user I want to have a configured portion of a filesystem automatically backed up continuously", "effort": 12},{"story":"In order to recover from a data failure as a computer user I want to be able to retrieve files that were backed up", "effort": 10},{"story":"In order to...