React Base Fiddle (JSX)

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

by Evan Sharp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.3/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.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>

SCSS

html,
body,
#container
.frame{
  position: relative;
  height: 100%;
  width: 100%;
}
.bg-warning{
  background-color: orange;
}

.page-head>h1{
  margin-top: 0;
}

.answer-box{
  position: fixed;
  width: 200px;
  height: 350px;
  overflow-y: auto;
  right: -200px;
  top: 115px;
  transition: all .5s ease;
  
  &.opened{
    right:0;
  }
}

.action-btns{
  position: fixed;
  right: 0;
}
.action-btn{
  color: #fff;
  height: 1.5em;
  width: 1.5em;
  line-height: 1.6;
  text-align: center;
  font-size: 1.3em;
  cursor: pointer;
}

.notes{
  position: fixed;
  bottom: 0;
  right: 0;
  
   textarea{
    width: 100%;
    height: 200px;
    display: block;
    resize: none;
  }
}

JavaScript 1.7

const { Button, Grid, Row, Col, Input, Well } = ReactBootstrap;

const Notes = () => (
	<div className='notes'>
  	<Input type='textarea' placeholder='Notes...' standalone />
    <Row>
      <Col xs={6}>
        <Button bsStyle='success'>
        	Transfer Call <i className='fa fa-step-forward'></i>
        </Button>
      </Col>
      <Col xs={6} className='text-right'>
        <Button bsStyle='danger'>
        	<i className='fa fa-times'></i> End Call
        </Button>
      </Col>
    </Row>
  </div>
);

const Header = () => (
	<header className='page-head'>
		<h1>Will be dynamic from state</h1>
  </header>
);

const AnswerBox = ({ answer }) => {
	let className = 'answer-box bg-primary';
	className += answer? ' opened' : '';
	return (
  	<Well bsSize="small" className={className}>
      <p>{answer}</p>
  	</Well>
  );
};

const ActionButtons = () => (
	<ul className='action-btns'>
  	<li className='action-btn bg-warning'><i className='fa fa-search'></i></li>
    <li className='action-btn bg-primary'><i className='fa fa-star'></i></li>
  </ul>
);

const App = () => (
	<div className='frame'>
    <Header />
    <ActionButtons />
    <AnswerBox />
    <Notes />
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);