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>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://npmcdn.com/style-it@latest/dist/style-it-standalone.js"></script>

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

JavaScript 1.7

class Intro extends React.Component {
  render() {
    return Style.it(`
      .emoji-toggle {
        position: relative;
        width: 60px;
        margin: 40px auto;
      }
      .emoji-toggle .well {
        display: block;
        background: #eee;
        height: 20px;
        border-radius: 10px;
        cursor: pointer;
      }
      .emoji-toggle .toggle {
        opacity: 0;
        border: 0;
        outline: none;
        height: 100%;
        width: 100%;
        background: transparent;
        position: absolute;
        cursor: pointer;
        z-index: 100;
      }
      .emoji-toggle .toggle ~ .emoji:before {
        content: "\\01F431";
        position: absolute;
        left: 0;
        top: -15px;
        font-size: 40px;
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      .emoji-toggle .toggle:checked ~ .emoji:before {
        left: 100%;
        margin-left: -1em;
      }
      .emoji-toggle .toggle ~ label {
        white-space: nowrap;
      }
      .emoji-toggle .toggle ~ label:before {
        position: absolute;
        right: 100%;
        margin-right: 5px;
        top: 0;
      }
      .emoji-toggle .toggle ~ label:after {
        position: absolute;
        left: 100%;
        margin-left: 5px;
        top: 0;
      }
      .emoji-travel .toggle ~ .emoji:before {
        content: "✈";
      }
      .emoji-travel .toggle:checked ~ .emoji:before {
        content: "🚃";
      }
      .emoji-travel .toggle ~ label:before {
        content: "Plane";
      }
      .emoji-travel .toggle ~ label:after {
        content: "Train";
      }
    `,
      <div className="emoji-toggle emoji-travel">
        <input type="checkbox" id="toggle2" className="toggle" />
        <div className="emoji" />
        <label htmlFor="toggle2" className="well" />
      </div>
    );
  }
}

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