JSFiddle - React, Tailwind, and code Playground

by jklm313

HTML

<script src="https://dl.dropboxusercontent.com/u/32750720/works/common%20resources/prefixfree.min.js"></script>
<div class='book'>
  
  <div class='post'>
    <div class='content'>
      <h1>The Pilgrim's Path</h1>
      <p>
        The pilgrim must visit each of the Shrines of the Seven Graces. At each site the pilgrim must stand before the three-sided stone triolith and read the inscription. To ease the pilgrim's task, the Temple has made this list of shrines along with directions and advice to pilgrims. The blessings of each shrine last at least a half day.
      </p>
    </div><!-- .content -->
  </div>
  
  <div class='post'>    
    <div class='content'>
      <h2>The Fields of Kummu: Shrine of Humility</h2>
      <p>
        Here Lord Vivec met a poor farmer whose guar had died. The farmer could not harvest his muck without his guar, and he could not provide for his family or his village. So the Lord Vivec removed his fine clothes and toiled in the fields like a beast of burden until the crop was harvested. It is at the Fields of Kummu we go to pray for the same humility Lord Vivec showed on that day.
      </p>
      <p>
        The Fields of Kummu are west of Suran on the north shore of Lake Amaya as you head towards Pelagiad. The shrine is between two rocks, and most easily noticed while traveling east along the road. Alof's farm nearby has a small dock on the north bank of Lake Amaya. This is the only dock nearby which Alof kindly allows servants of the Temple to use. It is customary to leave a portion of muck at the shrine to represent Vivec's humility.
      </p>
    </div><!-- .content -->
  </div>
  
  <div class='post'>
    <div class='content'>
      <h2>To Stop the Moon: The Shrine of Daring</h2>
      <p>
        When Sheogorath rebelled against the Tribunal, he tricked the moon Baar Dau into forsaking its appointed path through Oblivion. The Mad Star inspired the moon to hurl itself upon Vivec's new city, which Sheogorath claimed was built in...

CSS

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }

html, body {
  height: 100%;
  }

::-webkit-scrollbar {width:12px}
::-webkit-scrollbar-thumb {background: #222;}
::-webkit-scrollbar-track {background: transparent}

::selection {
  background: #222;
  color: white;
  }
::-moz-selection {
  background: #222;
  color: white;
  }

h1, p {
  margin: 5% 0;
  }

body {
  background-image:
    linear-gradient(
      65deg,
      indianred,
      yellow,
      hsla(180,40%,40%,.7)
      );
  color: #222;
  font-family: 'Gabriela', serif;
  perspective: 70em;/*in your face*/
  }
  body * {
    transform-style: preserve-3d;
    }

.book {
  height: 80%;
  width: 80%;
  max-height: 500px;
  min-height: 300px;
  max-width: 800px;
  min-width: 500px;
  background-image: 
    linear-gradient(
      90deg,
      hsla(30,40%,50%,.6),
      hsla(30,40%,20%,.9),
      hsla(30,40%,50%,.4) 90%
      ),
    url('http://inspirationhut3.inspirationhut.netdna-cdn.com/wp-content/uploads/2012/11/Old-Paper-Texture-3.jpg');
  background-size: 100%;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  
  border: 10px solid hsla(30,10%,30%,1);
  border-radius: 5px;
  box-shadow: 0 0 150px hsla(170,60%,60%,.7);
  }

.page {
  height: 100%;
  width: 50%;
  border-right: 10px solid transparent;
  position: absolute;
  top: 0; right: 0;
  transform-origin: 0 50%;
  transition: .6s;
  }
.post {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: violet;
  background-image: url('http://inspirationhut3.inspirationhut.netdna-cdn.com/wp-content/uploads/2012/11/Old-Paper-Texture-3.jpg');
  background-size: 100% 100%;
  backface-visibility: hidden;
  overflow: auto;
  padding: 5% 8%;
  transform-origin: center center;
  }
  .page > .post:nth-child(1) {
    z-index: 2;
    box-shadow: inset 50px 0 50px rgba(0,0,0,.5);
    transition: .5s;  
    }
  .page > .post:nth-child(2) {
    background-color:...

JavaScript

$('.post').each(function (i) {
        if (!(i % 2)) $(this).next('.post').addBack().wrapAll('<div class="page no-anim"/>');
    });
$('.page').click(function() {
    $(this).removeClass('no-anim').toggleClass('flip');
   $('.page > div').click(function(e) {
        e.stopPropagation();
   });
});