JSFiddle - React, Tailwind, and code Playground

by Sunify

HTML

<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<div id="app"></div>

Babel + JSX

const styles = {
	app: {
  	overflow: 'hidden',
    position: 'relative',
    width: 100,
    background: '#cf0',
  },
  dropdown: {
    position: 'absolute',
    width: 150,
    height: 100,
    background: '#FCC',
  },
};

class RelativePortal extends React.Component {
  
  constructor(props) {
  	super(props);
    this.node = document.createElement('div');
    document.body.appendChild(this.node);
  }
  
  render() {
    return null;
  }
  
  componentDidUpdate() {
    ReactDOM.render(
      <div {...this.props} />,
      this.node
    );
  }
  
  componentWillUnmout() {
    document.body.removeChild(this.node);
  }
  
}

class DropdownLink extends React.Component {
  state = {
    isOpen: false
  };

  render() {
    const { isOpen } = this.state;
    
    return (
      <div>
        <button onClick={() => this.setState({isOpen: !isOpen})}>
          Toggle
        </button>
        <RelativePortal>
          {isOpen &&
            <Dropdown />
          }
        </RelativePortal>
      </div>
    );
  }
}

class Dropdown extends React.Component {
  render() {
    return (
      <div style={styles.dropdown} />
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div style={styles.app}>
        <DropdownLink />
      
        <div>
          Some stuff here
        </div>
      </div>
    );
  }
}

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