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

class Dropdown extends React.Component {
  render() {
    return (
      <div style={{
        position: 'absolute',
        width: 150,
        height: 100,
        background: '#FCC'
      }} />
    );
  }
}

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={{overflow: 'hidden', position: 'relative', width: 100, background: '#cf0'}}>
        <DropdownLink />
      
        <div>
          Some stuff here
        </div>
      </div>
    );
  }
}

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