JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div id="page-1" class="slide-center">
    <div class="shelf" data-bind="foreach: books"> <a data-bind="attr: {href: '#book/' + $index(), title: Title}">
            <img width="100" height="150" data-bind="attr: {src: CoverImage}" />
        </a>

    </div>
</div>
<div id="page-2" class="slide-right">
    <div class="title-bar">
        <button type="button">Back</button>
    </div>
    <div class="content" data-bind="with: selectedBook">
        <img data-bind="attr: {src: CoverImage}" style="float: left; padding: 5px;" width="150" height="200" />
        <div data-bind="text: Title"></div>
        <div>
            Author: <span data-bind="text: Author"></span>
        </div>
        <div>
            Artist: <span data-bind="text: Artist"></span> <span data-bind="text: Pages"></span>
        </div>
        <div>
            Timeline: <span data-bind="text: EventYear"></span>  <span data-bind="text: CalendarEra"></span>
        </div>
        <p data-bind="text: Synopsis"></p>
    </div>
</div>

CSS

html, body {
    overflow: hidden;
    color: #eee;
    font-family: arial;
}
div[id*='page-'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #444;
    overflow: auto;
}
.slide-center {
    -webkit-transition: -webkit-transform .25s;
    -webkit-transform: translate3d(0, 0, 0);
}
.slide-left {
    -webkit-transition: -webkit-transform .25s;
    -webkit-transform: translate3d(-100%, 0, 0);
}
.slide-right {
    -webkit-transition: -webkit-transform .25s;
    -webkit-transform: translate3d(100%, 0, 0);
}
.title-bar {
    position: absolute;
    top:0;
    left:0;
    height: 35px;
}
.content {
    margin-top: 35px;
}

JavaScript

window.addEventListener("hashchange", function (event) {
    if (location.hash.indexOf("#book/") != -1) {
        vm.selectedBook(vm.books()[location.hash.substring(location.hash.indexOf("/") + 1)]);
        $("#page-1").addClass("slide-left");
        $("#page-2").removeClass("slide-right").addClass("slide-center");
    }

    console.log(vm);
});

$("button").on("click", function () {
    window.location.hash = "#";

    $("#page-1").removeClass("slide-left");
    $("#page-2").removeClass("slide-center").addClass("slide-right");
});

var view = function (books) {
    var self = this;

    self.books = ko.observableArray(books);
    self.selectedBook = ko.observable();
};

window.vm = new view([{
    "Title": "Dawn of the Jedi: Into the Void",
        "WikiPage": "Dawn_of_the_Jedi:_Into_the_Void",
        "Author": "Tim Lebbon",
        "Artist": "Torstein Nordstrand",
        "CoverImage": "http://img3.wikia.nocookie.net/__cb20130125030653/starwars/images/thumb/7/73/DawnOfTheJediIntoTheVoidCover.jpg/250px-DawnOfTheJediIntoTheVoidCover.jpg",
        "Publisher": "LucasBooks",
        "ReleaseDate": "2013-05-07T00:00:00",
        "MediaType": "Hardcover",
        "Pages": "320",
        "Isbn": "0345541936;9780345541932;0345545052;9780345545053",
        "Era": "Before the Republic era",
        "EventYear": "25,793",
        "CalendarEra": "BBY",
        "Category": "Standalone novels;",
        "Synopsis": "On the planet Tython, the ancient Je’daii order was founded. And at the feet of its wise Masters, Lanoree Brock learned the mysteries and methods of the Force—and found her calling as one of its most powerful disciples. But as strongly as the Force flowed within Lanoree and her parents, it remained absent in her brother, who grew to despise and shun the Je’daii, and whose training in its ancient ways ended in tragedy."
}, {
    "Title": "Revan",
        "WikiPage": "Star_Wars:_The_Old_Republic:_Revan",
        "Author": "Drew Karpyshyn",
        "Artist":...