JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githack.com/AlexGalays/abyssa-js/master/target/abyssa.js"></script>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://raw.githack.com/AlexGalays/abyssa-js/master/src/addon/ReactState.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<header>
    <a href="/" data-nav="mousedown">Index</a>
    <a href="/blue" data-nav="mousedown">Blue</a>
</header>

<main></main>

CSS

body {
    color: #222;
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
}


header {
    background: #222;
    padding: 8px;
}

a {
    color: #EEE;
    display: inline-block;
    font-weight: bold;
    margin-right: 10px;
}

main {
    margin-top: 8px;
}

#blue, #green, #red {
    overflow-x: hidden;
}

#green, #red, #yellow {
    margin-top: 12px;
    padding: 18px 8px;
    color: #EEE;
}

#blue {
    background: #6DBDD6;
    padding: 8px;
}

#green {
    background: #118C4E;  
}

#green a {
    display: block;
    margin-top: 10px;
}

#red {
    background: #B71427;   
}

#yellow {
    background: #FFE658;
}

#yellow img {
    width: 100px;
}


.fade-slide-in {
    -webkit-animation-name: fade-slide-in;
    -webkit-animation-duration: 400ms;
    -webkit-animation-timing-function: ease-out;
    
    animation-name: fade-slide-in;
    animation-duration: 400ms;
    animation-timing-function: ease-out;
}

@-webkit-keyframes fade-slide-in {
    0% {
        -webkit-transform: translateX(40px);
        opacity: 0;
    }
    
    50% {
        -webkit-transform: translateX(0);
    }
    
    100% {
        opacity: 1;
    }
}

@keyframes fade-slide-in {
    0% {
        transform: translateX(40px);
        opacity: 0;
    }
    
    50% {
        transform: translateX(0);
    }
    
    100% {
        opacity: 1;
    }
}

JavaScript 1.7

/** @jsx React.DOM */

var main = document.querySelector('main');

var State  = Abyssa.State,
    Router = Abyssa.Router,
    ReactState = Abyssa.ReactState(main),
    Blue, Green, Red, Yellow,
    router;

Blue = React.createClass({
    render: function() {
        return (
            <div id="blue" className="fade-slide-in">
                <h1>Blue screen</h1>
                
                <a href="/blue/green/33" data-nav="mousedown">Green</a>
                <a href="/blue/red" data-nav="mousedown">Red</a>
                
                {this.props.children}
            </div>
        );
    }
});

Green = React.createClass({
    render: function() {
        var id = this.props.params.id;
        return (
            <div id="green" className="fade-slide-in">
                Green (id = {id})
                <a href="/blue/green/33/yellow" data-nav="mousedown">Go even deeper</a>
                {this.props.children}
            </div>
        );  
    }
});

Red = React.createClass({
    render: function() {
        return <div id="red" className="fade-slide-in">Red</div>;
    }
});

Yellow = React.createClass({
    render: function() {
        var url = "http://img.ctrlv.in/img/15/07/16/55a8081fe53f9.png";
  
        return (
            <div id="yellow" className="fade-slide-in">
                <img src={url}/>
            </div>
        );
    }
});


router = Router({
    // A regular state not using React! We can mix and match technologies
    // since the router is not tied to any lib or rendering technique.
    index: State('', { enter: function() { main.innerHTML = 'Index' } }),

    blue: ReactState('blue', Blue, {
        green: ReactState('green/:id', Green, {
            yellow: ReactState('yellow', Yellow)
        }),
        red: ReactState('red', Red)
    })
})
.init('blue/red');