<div id="app"></div>
html, body
  height: 50%
  
body
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  font-family: Helvetica Neue
  
.thinker-container
  position: relative
  top: 10px
  
.thinker
  position: absolute
  
.hat
  position: absolute
  left: 120px
  top: -10px
/*
 * A simple React component
 */
const Hat = ({type}) => {
  let url = '';
  switch (type) {
    case 'cap': url = `https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fcap.png?1518712935783`; break;
    case 'pirate': url = `https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fpirate.png?1518712936051`; break;
    case 'harry-potter': url = `https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fharry-potter.png?1518712935951`; break;
    case 'propeller': url = `https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fpropeller.png?1518712935957`; break;
    case 'leprecon': url = `https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fleprecon.png?1518712935850`; break;
  }
  return <img src={url} className='hat' />
}

const thinkerImg = 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fthinker.png?1518712935862';

const Thinker = () => (
  <img className="thinker" src={thinkerImg} />
)

const ThinkerWithHat = ({hat}) => (
  <div className="thinker-container">
    <Thinker />
    <Hat type={hat}/>
  </div>
);

const HatSwitcher = ({onHatChanged}) => (
  <div>
    Select a hat:
  <select onChange={(e) => onHatChanged(e.target.value)}>
    <option value="cap">Cap</option>
    <option value="pirate">Pirate</option>
    <option value="harry-potter">Harry Potter</option>
    <option value="propeller">Propeller</option>
    <option value="leprecon">Leprecon</option>
  </select>
  </div>
);

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hat: 'cap' }
  }
  render() {
    const onHatChanged = (hat) => {
      this.setState({ hat });
    };
    return (
      <div>
        <HatSwitcher onHatChanged={onHatChanged}/>
        <ThinkerWithHat hat={this.state.hat}/>
      </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js