<div id="app"></div>
html, body
  height: 100%
  
body
  // display: flex
  // flex-direction: column
  // justify-content: center
  // align-items: center
  font-family: Helvetica Neue

#app
  text-align: center
  display: flex
  justify-content: center
  align-items: center
  height: 100vh

.house
  position: relative
  height: 380px
  width: 400px
  
img
  position: absolute
  
.roof
  left: 0
  top: 0
  border-width: 0

.chimney
  left: 255px
  
.wall
  left: 5px
  top: 48px
 
.window
  left: 200px
  top: 182px

.door
  left: -25px
  top: 182px
  cursor: pointer
View Compiled
const IMAGES = {
  roof: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Froof.png?1515785259159',
  wall: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fwall.png?1501113882297',
  window: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fwindow.png?1501113882112',
  door_open: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fdoor_open.png?1501113882121',
  door_closed: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fdoor_close.png?1501113881433',
  cat_sleeping: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fcat_sleeping.png?1515785234959',
  cat_awake: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fcat_standing.png?1515785235095',
}

const Roof = ({ color }) => <img src={IMAGES.roof} className="roof" style={{background: 'blue'}}/>;
const Wall = () =>  <img src={IMAGES.wall} className='wall'/>;
const Window = () => <img src={IMAGES.window} className='window'/>;

class Door extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: 'closed' };
  }
  render() {
    const onClick = () => {
      if (this.state.isOpen === 'open')
        this.setState({ isOpen: 'closed' });
      else
        this.setState({ isOpen: 'open' });
    }
    return <img src={this.state.isOpen === 'open' ? IMAGES.door_open : IMAGES.door_closed } className='door' onClick={onClick} />;
  }
}

// const Door = () => <img src='http://i.imgur.com/S1Z1hgA.png' className='door'/>

class House extends React.Component {
  render() {
    return (
      <div className='house'>      
        <Roof color='blue'/>
        <Wall />
        <Window />
        <Door />
       </div>
    );
  }
}

const App = () => <House />;

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<App />, 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