JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.min.js"></script>
<div id="container"></div>
<script type="text/jsx">
var React=window.React,
ReactRouter= window.ReactRouter;
var Link = ReactRouter.Link,
Route = ReactRouter.Route,
RouteHandler = ReactRouter.RouteHandler;
var Parent = React.createClass({
render: function () {
return (
<div>
<h2>This is the World.</h2>
<ul>
<li>
<Link to='india'>India </Link>
</li>
<li>
<Link to='usa'>USA</Link>
</li>
</ul>
<RouteHandler/>
</div>
);
}
});
var India = React.createClass({
render: function () {
return (
<div>India is a vast South Asian country with diverse terrain – from Himalayan peaks to Indian Ocean coastline – and history reaching back 5 millennia.
</div>
);
}
});
var USA = React.createClass({
render: function () {
return (
<div>
The Americas, or America, also known as the Western Hemisphere and the New World,
</div>
);
}
});
var container = document.getElementById('container');
var Routes = (
<Route name="parent" path="/" handler={Parent}>
<Route name="india" path="/country/india" handler={India}/>
<Route name="usa" path="/country/usa" handler={USA} />
</Route>
);
ReactRouter.run(Routes, function (Handler) {
...