JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-motion/build/react-motion.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@blueprintjs/core@^1.11.0/dist/blueprint.css">
<script src="https://unpkg.com/[email protected]/dest/react-awesome-popover.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dest/react-awesome-popover.css">
<div id="root"></div>

CSS

#root {
	margin: 50px auto;
	width: 100px;
}

.rap-popover-content {
  background:white;
	box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2),
		0 8px 24px rgba(16, 22, 26, 0.2);
}

.pad {
	padding: 10px;
	width: 200px;
}

Babel + JSX

/*dxxbb*/
const Popover = ReactAwesomePopover
const { Motion, spring } = ReactMotion

ReactDOM.render(
	<Popover action="click" placement="bottom" contentClass="rap-popover-content">
		<a className="pt-button" role="button">
			Open it
			<span className="pt-icon-standard pt-icon-caret-down pt-align-right" />
		</a>
		<div className="pad">
			<h3>Popover</h3>
			<Popover contentClass="rap-popover-content" action="click" motion>
				<a className="pt-button" tabIndex={0} role="button" style={{ marginTop: 10 }}>
					Open another
					<span className="pt-icon-standard pt-icon-caret-down pt-align-right" />
				</a>
				{(popperProps, Arrow) => (
					<Motion defaultStyle={{ rotateY: 90 }} style={{ rotateY: spring(0) }}>
						{({ rotateY, scale }) => {
							var motionStyle = {
								transform: `${popperProps.style.transform} rotateY(${rotateY}deg)`,
							}
							return (
								<div {...popperProps} style={{ ...popperProps.style, ...motionStyle }}>
									<h3 className="pad">Also works well with react-motion</h3>
									{Arrow}
								</div>
							)
						}}
					</Motion>
				)}
			</Popover>
		</div>
	</Popover>,
	document.getElementById("root"),
)