React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.modal {
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.modal--active {
		background: rgba(0, 0, 0, 0.25);
		width: 100%;
		height: 100%;
}

.modal__content {
    margin-bottom: 24vh;
		border-radius: 5px;
		background-color: white;
		animation: modal-grow 0.4s ease forwards;
}

.modal__inner-content {
    background-color: white;
		opacity: 0;
		animation: modal-opacity 0.35s ease forwards 0.35s;
}



@keyframes modal-grow {
	from {
		transform: scale3d(0, 1, 1);
	}

	to {
		transform: scale3d(1, 1, 1)
	}
}

@keyframes modal-opacity {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

Babel + JSX

class Hello extends React.Component {
 	constructor(props) {
		super(props);
		this.state = {};
	}

	render() {
  	const modalClasses = "modal" + " " + (this.props.isOverlay ? "modal--active" : "");

		const content = () => {
			return (
				<div className="content">
					<div className="innerContent">
					  {this.props.renderComponent()}
					</div>
				</div>
			)
		};

		return  (
			<div className={modalClasses}>
				{this.props.isOverlay ? content() : null}
			</div>
		);
	}
}

ReactDOM.render(
	<div>
  asdasdassasadasd content above
  <Hello renderComponent={() => <div style={{width: "200px", height: "200px", backgroundColor: "white"}}>HELLO</div>} isOverlay={true}/>
  asdasdsad content below.
  </div>,
  document.getElementById('container')
);