JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.turnjs.com/lib/turn.min.js"></script>
<link rel="stylesheet" href="http://www.turnjs.com/css/jquery.ui.css">
<div class="sample-flipbook">
  <div id="flipbook">
    <div class="hard"> Turn.js </div>
    <div class="hard"></div>
    <div>
      <h1>
        Page 1
      </h1>
      <div>
        Its page 1 content. You can add custom content here
      </div>
    </div>
    <div> You can add multiple like this </div>
    <div> Page 2 daddd </div>
    <div> Page 3 vdd</div>
    <div> Page 4fddd </div>
    <div class="hard"></div>
  </div>
</div>

CSS

.sample-flipbook {
  -webkit-transition: margin-left 0.2s;
  -moz-transition: margin-left 0.2s;
  -ms-transition: margin-left 0.2s;
  -o-transition: margin-left 0.2s;
  transition: margin-left 0.2s;
}

.sample-flipbook .page {
  background-color: white;
  font-size: 20px;
}

.sample-flipbook .page-wrapper {
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -o-perspective: 2000px;
  perspective: 2000px;
}

.sample-flipbook .hard {
  background: #ccc !important;
  color: #333;
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
  font-weight: bold;
}

.sample-flipbook .odd {
  background: -webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
  background-image: -webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: -moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: -ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: -o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
}

.sample-flipbook .even {
  background: -webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
  background-image: -webkit-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -moz-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -ms-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -o-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: linear-gradient(left, #fff 95%, #dadada 100%);
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
 ...

JavaScript

$("#flipbook").turn({
  autoCenter: true
});