JSFiddle - React, Tailwind, and code Playground

by Vahe Araqelyan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-awesome-popover@6.1.0/build/index.umd.js"></script>
<script src="https://unpkg.com/react-motion/build/react-motion.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@blueprintjs/core@1.40.0/dist/blueprint.css">
<div id="root"></div>

CSS

#root {
	margin: 50px auto;
	width: 100px;
}
.content {
  padding:10px;
  background:white;
  border-radius:3px;
  min-width:200px;}
  
.black {background:black;}
.black > h3 {color: white;}

Babel + JSX

const Popover = ReactAwesomePopover;
const { Motion, spring } = ReactMotion;

ReactDOM.render(
  <Popover placement="bottom-center" arrowProps={{ style: { color: "white" } }}>
    <a className="pt-button" role="button">
      Click{" "}
      <span className="pt-icon-standard pt-icon-caret-down pt-align-right" />{" "}
    </a>
    <Motion defaultStyle={{ opacity: 0 }} style={{ opacity: spring(1) }}>
      {style => {
        return (
          <div className="content" style={style}>
            <h3>Popover</h3>

            <Popover arrowProps={{ style: { color: "black" } }}>
              <a className="pt-button" role="button">
                Open another{" "}
                <span className="pt-icon-standard pt-icon-caret-down pt-align-right" />
              </a>

              <div className="content black">
                <h3>Hello</h3>
              </div>
            </Popover>
          </div>
        );
      }}
    </Motion>
  </Popover>,

  document.getElementById("root")
);