JSFiddle - React, Tailwind, and code Playground

by Vahe Araqelyan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.1/react-dom.min.js"></script>

CSS

body {
  background-color: #f0f0f0;
}

button {
  background: #34495e;
  border: 0;
  color: #fff;
  display: block;
  width: 100%;
  margin: 0 auto 20px;
  border-radius: 4px;
  padding: 0;
  line-height: 40px;
}

.popover {
  background: #fff;
  border-radius: 4px;
  width: 300px;
  margin: 20px auto;
  padding: 15px;
  position: absolute;
  top: 100%;
  left: -50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.popover-container {
  width: 200px;
  margin: 50px auto;
  position: relative;
}

Babel + JSX

class Popover extends React.Component {
    constructor() {
        super();
        this.toogle = this.toogle.bind(this);
        this.state = {
            popupVisible: false
        };
    }

    toogle() {
        this.setState(prevState => ({
            popupVisible: !prevState.popupVisible
        }));
    }
    componentDidMount() {
        this.button.addEventListener("click", this.toogle, false);
    }
    componentWillUnmount() {
        this.button.removeEventListener("click", this.toogle, false);
    }

    render() {
        return (
            <div className="popover-container">
                <button
                    ref={node => (this.button = node)}
                    onClick={this.handleClick}
                >
                    Toggle Popover
                </button>
                {this.state.popupVisible && (
                    <div className="popover">I'm a popover!</div>
                )}
            </div>
        );
    }
}

ReactDOM.render(<Popover />, document.body);