JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.0.0/ReactRouter.min.js"></script>
 <div id="container"></div>
<script src="output/myCode.js">

CSS

body {
    background-color: #A5EAE0;
    padding: 20px;
}
h1,h2,p,ul,li {
    font-family: Helvetica,Arial, sans-serif;
}
.content {
   margin:0;
   background-color: #fff;
   padding: 20px;
   float: left;
   width: 60%;
   height: 100%;
   border: 1px solid;
}
.content h2 {
    padding: 0;
    margin: 0;
}
.content li {
    margin-bottom: 10px;
}
.sidebar {
   width: 30%;
   height: 100px;
   float:right;
   margin-right: 40px;
}
ul li{
    padding:20px;
    margin-bottom:10px;
    width:100%;
    color: black;
    background-color:#fff;
    border: 1px solid;
}
ul {
    display:block;
    padding: 0;
    margin: 0;
    width:200px;
    z-index: 20;
    list-style: none;
    text-align:center;
}
ul li a {
    display:block;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    padding: 20px;
}
.active {
    color: #0099FF;
}

JavaScript

var { Router, Route, IndexRoute, Link, browserHistory } = ReactRouter
     
var Sidebar = React.createClass({
render:function(){
<div className="sidebar">
<ul>
 {props.books.map((book)=>
            <li key={book.id}>
            <Link to="/:id">
            {book.title}
            </link></li>
    )}
    </ul> 
    <main>
    {this.props.children}
    </main>
    </div>
}
});

var Home = React.createClass({
render:function(){
return (<div className="home" key="0">
    <h3>{book.title}</h3>
    <p>{book.description}</p>
    <p>{book.rating}</p>
    </div>
    )
}
});

var Content = React.classClass({
render:function(){
return(
  <div className="content" key={book.id}>
    <h3>{book.title}</h3>
    <p>{book.description}</p>
    <p>{book.rating}</p>
    </div>
)
}
});

// book lists 
var books =[{id: 1, title: 'War and Peace', 
              description:'War and Peace by Leo Tolstoy from Coterie Classics All Coterie Classics have been formatted for ereaders and devices and include a bonus link to the free audio book. “If everyone fought for their own convictions there would be no war.” ― Leo Tolstoy, War and Peace War and Peace is an epic novel by Leo Tolstoy that explores the lives on individuals during the time of international conflict.', rating:'4/5'},
            { id: 2, title: 'Anna Karenina', description:'Widely considered one of the best novels ever written, Anna Karenina is the tragic story of the aristocratic Anna’s doomed affair with the wealthy Count Vronsky. Reflecting Russian morals of the time, as well as Tolstoy’s personal feelings on infidelity, Anna Karenina explores themes of passion and fidelity, the impact that social norms have on personal choice, and the ramifications of choosing a life outside of that deemed acceptable by society.', rating:'4/5'},
            { id: 3, title: 'The Brothers Karamazov', description:'The Brothers Karamazov by Fyodor Dostoevsky from Coterie Classics All Coterie Classics have been formatted for ereaders and...