JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react-with-addons.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="http://materializecss.com/css/ghpages-materialize.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 body {
    background-color: #fff; /*#2d2d2d;*/
    font-family:'Roboto';
    color: #2d2d2d;
    font-weight: 300;
}
h1 {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 42px;
}
.navigation {
    width: 200px;
    text-transform: uppercase;
    float: right;
}
.navigation ul {
    background-color: #37383a;
    color:#fff;
    cursor: pointer;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.navigation .header {
    padding: 15px;
    background-color: #4e5053;
}
.navigation li {
    padding: 15px;
}
.navigation .selected {
    background-color: #9061b2;
}
.score {
    font-size: 36px;
    margin: 15px;
    color: #afb3b9;
}
.title {
    font-size: 18px;
}
.title a {
    text-decoration: none;
    color: #2d2d2d;
}
.author {
    font-size: 16px;
}
.author b {
    color: #afb3b9;
}

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}

#timer {
    background:yellow;
    position:absolute;
    top:0;
    right:0;
    width:100px;
        margin:0;
    padding:10px;
    color: #2d2d2d;
}

.card-title {
    background:#2d2d2d;
       opacity: 0.8;
    filter: alpha(opacity=80); 
}

JavaScript 1.7

/**
 * Using React 0.13.2
 * Updated 2015-07-14
 */
 var decodeEntities = (function() {
     // this prevents any overhead from creating the object each time
     var element = document.createElement('div');
     
     function decodeHTMLEntities (str) {
         if(str && typeof str === 'string') {
             // strip script/html tags
             str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
             str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
             element.innerHTML = str;
             str = element.textContent;
             element.textContent = '';
         }
         
         return str;
     }
     
     return decodeHTMLEntities;
 })();
 
 
    var loading = function(arg) {
        if(arg) {
        // add the overlay with loading image to the page
        var over = '<div id="overlay">' +
            '<img id="loading" src="http://bit.ly/pMtW1K">' +
            '</div>';
        $(over).appendTo('body');

        // click on the overlay to remove it
        //$('#overlay').click(function() {
        //    $(this).remove();
        //});

        // hit escape to close the overlay
        $(document).keyup(function(e) {
            if (e.which === 27) {
                $('#overlay').remove();
            }
        });
        }
        else {
            $('#overlay').remove();
        }
    };
var NavigationItem = React.createClass({
    onClick: function() {
        this.props.itemSelected(this.props.item);
    },
    render: function() {
        return (
            <li onClick={this.onClick} className={this.props.selected ? "selected" : ""}>
                <a href="#" className="waves-effect waves-teal">{this.props.item.name}</a>
            </li>
        );
    }
});

var Navigation = React.createClass({
    setSelectedItem: function(item) {
        this.props.itemSelected(item);
    },
    render: function() {
        var _this = this;

        var items = this.props.items.map(function(item) {
    ...