JSFiddle - React, Tailwind, and code Playground

HTML

<section id="pages">
        <article class="page" id="one">
             <div class="pagebody">&nbsp;</div>
        </article>
        <article class="page" id="two">
            <div class="pagebody">&nbsp;</div>
        </article>
        <article class="page" id="three">
            <div class="pagebody">&nbsp;</div>
        </article>
        <article class="page" id="four">
            <div class="pagebody">&nbsp;</div>
        </article>
    </section>
</section>

CSS

/* site layout */
* {
    margin: 0;
    padding: 0;
    border: none;
}

article,
section { display: block; }

html,
body { overflow: hidden; }

html,
body,
#book,
#pages,
.page {
    width: 100%;
    height: 100%;
}

.check,
.shownavigation,
.nextback {
    cursor: pointer;
    width: 60px;
    height: 60px;
    background-color: #ccc;
    background-color: rgba(255,255,255,.5);
    background-repeat: no-repeat;
    background-position: center center;
    transition: all .25s ease;
    position: fixed;
    top: 50px;
    left: 50px;
    display: block;
    border-bottom: 1px solid #757575;
}

.shownavigation {
    border-radius: 5% 5% 0 0;
    box-shadow: 0 -1px 2px #757575;
}

.shownavigation:after {
    position: absolute;
    content: '';
    width: 40%;
    height: 3px;
    background-color: #555;
    top: 50%;
    margin-top: -1px;
    left: 30%;
    box-shadow: 0 -7px #555, 0 7px #555;
}

input,
.check {
    display: none;
    background-image: url(http://consta.errazib.com/images/inav.png);
}

.check:hover,
.shownavigation:hover,
.nextback:hover {
    background-color: #f0f0f0;
    background-color: rgba(255,255,255,.75);
}

#showradio:checked + label,
.move:checked + label,
.move:checked + label:hover {
    background-color: #fff;
    background-color: rgba(255,255,255,.85);
    cursor: default;
}

.move:checked + label:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;     
    border-left: 10px solid #fff;
    border-left: 10px solid rgba(255,255,255,.85);
    position: absolute;
    left: 60px;
    top: 20px;
}

#showradio ~ .nextback { display: block; }

#showradio:checked ~ .nextback { display: none; }

#showradio:checked + label { cursor: pointer; }

#showradio:checked + label:hover { background-color: #fff; }

#content1:checked ~ .content3,
#content1:checked ~ .content4,
#content2:checked ~ .content2,
#content2:checked ~ .content4,
#content3:checked ~...

JavaScript

/**
* Javascript is only used to visualize some of the sliding effects on IE < 10
* v.2 of http://codepen.io/howbizarre/pen/Halqb
**/
</script>
<!--[if lt IE 10]><script type="text/javascript">
$(document).ready(function () {
    'use strict';

    var checks = $('.check'),
        content = $('#pages');

    $('.shownavigation').hide();
    $('.nextback').hide();
    $(checks[0]).addClass('active');

    checks.css({
        "display": "block",
        "border": "1px solid #757575",
        "margin-top": "-1px"
    }).on('click', function () {
        var self = $(this),
            page = self.data("page");

        checks.removeClass('active');
        self.addClass('active');
        content.stop().animate({ "top": '-' + page + '%' }, 500);
    });
});
</script><![endif]-->
<script>