JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.js"></script>
  <h1 dir="ltr" class="center">How to Win Every Argument</h1>
  <p dir="ltr" class="center bold">Madsen Piri</p>

  <div class="offset">
    <div class="flipbook-viewport">
      <!-- Added-->
      <div class="container">
        <!-- Added-->
        <div class="flipbook">
          <!-- Added-->

          <div style="width: 100.0%;">
            <img src="https://images.unsplash.com/photo-1552425570-3182d7776903?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=461" alt="Picture #1" />
          </div>
         
          <div style="width: 37.238758708043065%;">
            <img src="https://images.unsplash.com/photo-1564521840671-9e3a876404e9?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=461" alt="Picture #2" />
          </div>


          <div style="width: 45.59848005066498%;">
            <img src="https://images.unsplash.com/photo-1489776568478-ad3e14ede4f1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=461" alt="Picture #3" />
          </div>

          <!-- rest of pages -->
        </div>
      </div>
    </div>
  </div>

JavaScript

/*
I am including turn.min.js here because of connection issues. turn.js website is not served over https. Chrome does not allow inscure file inclusion. If you have the file on your server your can just include through a script tag.

script src="PATH_TO_TURNJS_DIR/turn.min.js
*/

/* turn.js 4.1.0 | Copyright (c) 2012 Emmanuel Garcia | turnjs.com | turnjs.com/license.txt */

 (function(f) {
   function I(a, b, c) {
     if (!c[0] || "object" == typeof c[0]) return b.init.apply(a, c);
     if (b[c[0]]) return b[c[0]].apply(a, Array.prototype.slice.call(c, 1));
     throw p(c[0] + " is not a method or property");
   }

   function l(a, b, c, d) {
     return {
       css: {
         position: "absolute",
         top: a,
         left: b,
         overflow: d || "hidden",
         zIndex: c || "auto"
       }
     }
   }

   function R(a, b, c, d, e) {
     var h = 1 - e,
       f = h * h * h,
       g = e * e * e;
     return j(Math.round(f * a.x + 3 * e * h * h * b.x + 3 * e * e * h * c.x + g * d.x), Math.round(f * a.y + 3 * e * h * h * b.y + 3 * e * e * h * c.y + g * d.y))
   }

   function j(a, b) {
     return {
       x: a,
       y: b
     }
   }

   function E(a,
     b, c) {
     return y && c ? " translate3d(" + a + "px," + b + "px, 0px) " : " translate(" + a + "px, " + b + "px) "
   }

   function F(a) {
     return " rotate(" + a + "deg) "
   }

   function n(a, b) {
     return Object.prototype.hasOwnProperty.call(b, a)
   }

   function S() {
     for (var a = ["Moz", "Webkit", "Khtml", "O", "ms"], b = a.length, c = ""; b--;) a[b] + "Transform" in document.body.style && (c = "-" + a[b].toLowerCase() + "-");
     return c
   }

   function O(a, b, c, d, e) {
     var h, f = [];
     if ("-webkit-" == v) {
       for (h = 0; h < e; h++) f.push("color-stop(" + d[h][0] + ", " + d[h][1] + ")");
       a.css({
         "background-image": "-webkit-gradient(linear, " +
           b.x + "% " + b.y + "%," + c.x + "% " + c.y + "%, " + f.join(",") + " )"
      ...