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 Dropdown extends React.Component {
  render() {
    return (
      <div style={styles.dropdown} />
    );
  }
}

class DropdownLink extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    };
  }

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

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

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