<div id="app"></div>
@import 'https://fonts.googleapis.com/css?family=Alfa+Slab+One';


.FourOhFour {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #121212;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-size: cover;
		mix-blend-mode: overlay;
	}
	
	.code {
		font-family: 'Alfa Slab One', cursive;
		font-size: 144px;
		height: 100vh;
		color: white;
		width: 100%;
		display: flex;
		backgorund-position: center;
		align-items: center;
		background-size: cover;
		justify-content: center;
	}
}
View Compiled
var App = React.createClass({
	getDefaultProps: function() {
		return { image: 'http://i.giphy.com/l117HrgEinjIA.gif' }
	},
	render: function() {
		return (
			<div className="FourOhFour">
				<div className="bg" style={{ backgroundImage: 'url(' + this.props.image + ')'}}></div>
				<div className="code">404</div>
			</div>
		)
	}
});

ReactDOM.render(
	<App />,
	document.getElementById('app')
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://npmcdn.com/react@15.3.0/dist/react.min.js
  2. https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js