JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<script src="https://fb.me/react-with-addons-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<main id="app"></main>
<script type="text/jsx">
    (function(window) {
        'use strict';
        var React = window.React;

        var data = {
            items: [{
                itemClass: 'Item',
                id: 1,
                contentsHTML: '',
                text: 'Item 1'
            }, {
                itemClass: 'Item',
                id: 2,
                contentsHTML: '',
                text: 'Item 2'
            }, {
                itemClass: 'Item',
                id: 3,
                contentsHTML: '',
                text: 'Item 3'
            }, {
                itemClass: 'Item',
                id: 4,
                contentsHTML: 'boom',
                text: 'Item 4'
            }]
        };

        var MyCatalog = React.createClass({
            getInitialState: function() {
                return {
                    data: {
                        items: []
                    }
                };
            },

            componentDidMount: function() {
                this.setState({
                    data: this.props.data
                });
            },

            render: function() {
                return ( < div className = "catalog" > HELLO !! !I AM A CATALOG !! !

                < ItemList data = {
                    this.state.data
                }
                />
						</div > );
            }
        });

        var ItemList = React.createClass({
            render: function() {
                console.log(this.props);

                var items = this.props.data["items"].map(function(itemData) {
                    var component = Components[itemData['itemClass']];
                    return React.createElement(component, {
                        data: itemData,
                        key: itemData['id']
                    });
                });
           ...

CSS

body {
  font-family: tahoma;
}

div.catalog {
  border: 1px gray solid;
  padding: 2px;
}

div.list {
  border: 1px gray solid;
  padding: 2px;
}

div.item {
  background: tan;
  padding: 2px;
  margin: 2px;
}