JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="container"></div>

CSS

#container {
  padding: 40px;
  background-color: #111;
  border: solid blue 3px;
  width: 500px;
  height: 600px;
}

Babel + JSX

var Letter = React.createClass({
    render: function() {
      var letterStyle = {
          padding: 50,
          margin: 10,
          backgroundColor: this.props.bgcolor,
          color: "#333",
          display: "inline-block",
          fontFamily: "monospace",
          fontSize: "32",
          textAlign: "center"
        };
        return (
          <div style={letterStyle}>
            {this.props.children}
          </div>
        );
      }
  });

  var destination = document.querySelector("#container");

  ReactDOM.render(
    <div>
      <Letter bgcolor="#58B3FF">A</Letter>
	    <Letter bgcolor="#FF605F">E</Letter>
	    <Letter bgcolor="#FFD52E">I</Letter>
	    <Letter bgcolor="#49DD8E">O</Letter>
	    <Letter bgcolor="#AE99FF">U</Letter>
    </div>,
    destination
  );