JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
        <div id="container">
wtf
        </div>
        <script type="text/babel">

        class Vowel extends React.Component {
            render(){
                var VowelStyle = {
                    padding: 10,
                    margin: 10,
                    backgroundColor: this.props.bgcolor,
                    color: "#333",
                    display: "inline-block",
                    fontFamily: "monospace",
                    fontSize: 32,
                    textAlign: "center"
                };
                return(
                    <div>
                        {this.props.children}
                    </div>
                )
            }
        }

        var destination = document.querySelector('#container')
        ReactDOM.render(
            <div>
                <Vowel bgcolor="#58B3FF">A</Vowel>
                <Vowel bgcolor="#FF605F">E</Vowel>
                <Vowel bgcolor="#FFD52E">I</Vowel>
                <Vowel bgcolor="#49DD8E">O</Vowel>
                <Vowel bgcolor="#AE99FF">U</Vowel>
            </div>,destination);
        </script>
    </body>
</html>