React Hello World Example with ES6+JSX

A basic Hello World widget with in browser JSX transformed + ES6 support

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.jp-volume-container {
  min-width: 42px;
  position: relative;
  top: 100px;
}

.jp-mute {
  height: inherit;
  min-width: 42px;
  cursor: pointer;
}

button {
  color: #000;
  padding: 0;
  border: none;
  background-color: transparent;
}

.jp-volume-controls {
  position: absolute;
  top: 0;
  height: 100%;
}

.jp-volume-controls .jp-volume-bar-container {
  background-color: #e5e5e5;
  position: absolute;
  height: 0;
  width: 24px;
  left: 8px;
  bottom: 100%;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.jp-volume-bar {
  background-color: #a1c1f4;
  cursor: pointer;
  border-radius: 1px;
  display: none;
  -webkit-transform: translateX(-50%) rotate(180deg);
  -moz-transform: translateX(-50%) rotate(180deg);
  -ms-transform: translateX(-50%) rotate(180deg);
  transform: translateX(-50%) rotate(180deg);
  width: 8px;
  height: 80px;
  position: absolute;
  bottom: 100%;
  left: 50%;
}

.jp-volume-container:hover .jp-volume-bar-container {
  transition-duration: 0.3s;
  outline: solid 1px #cfcfcf;
  height: 100px;
}

.jp-volume-container:hover .jp-volume-bar-container .jp-volume-bar {
    display: block;
    bottom: 10%;
  }

JavaScript 1.7

const volumeControlOnClick = (e) => {
  const volumeBarContainer =
    e.currentTarget.nextElementSibling.querySelector('.jp-volume-bar-container');
  /* Stop propogation is for mobiles to stop
    triggering mute when showing volume bar */
  if (volumeBarContainer.clientHeight === 0) {
    e.stopPropagation();
    console.log("stop propogation")
  }
};

class Volume extends React.Component {
  constructor(props) {
    super(props);
   
    this.state = {};
  }
	render() {
  	return (
    	<div className="jp-volume-container">
        <Mute onTouchStart={volumeControlOnClick}><i className="fa fa-volume-up" /></Mute>
        <div className="jp-volume-controls">
          <div className="jp-volume-bar-container">
            <VolumeBar />
          </div>
         </div>
       </div>
    );
  }
};

class Mute extends React.Component {
	render() {
  	return (
      <button className="jp-mute" onClick={() => console.log("mute toggled")} onTouchStart={this.props.onTouchStart}>
      	{this.props.children}
      </button>
    );
  }
};

class VolumeBar extends React.Component {
	render() {
  	return (
    	<div className="jp-volume-bar" onClick={() => console.log("bar moved")}>
        {this.props.children}
      </div>
    );
  }
};

React.render(<Volume />, document.getElementById('container'));