JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
    <select id="places" name="places">
        <option value="bali">1 Bali</option>
        <option value="Sri_Lanka">2 Sri Lanka</option>
        <option value="Wuyi_Shan">3 Wuyi Shan</option>
        <option value="Cebu">4 Cebu</option>
        <option value="Hong_Kong">5 Hong Kong</option>
        <option value="Koh_Chang">6 Koh Chang</option>
        <option value="KL">7 KL</option>
        <option value="Siem_Reap">8 Siem Reap</option>
        <option value="Singapore">9 Singapore</option>
        <option value="Vietnam">10 Vietnam</option>
        <option value="Shanghai">11 Shanghai</option>
        <option value="Yangshuo">12 Yangshuo</option>
    </select>
    <div id="main_wrapper">
        <!-- pages sorted in reverse order so last page is at bottom of stack -->
        <!--Idx 0-->
        <div class="page right last">
            <div id="p12" class="front">PAGE 12 <span class="capt">Yangshuo</span>

            </div>
        </div>
        <!--Idx 1-->
        <div class="page right">
            <div id="p11" class="back">PAGE 11 <span class="capt">Shanghai</span>

            </div>
            <div id="p10" class="front">PAGE 10 <span class="capt">Vietnam</span>

            </div>
        </div>
        <!--Idx 2-->
        <div class="page right">
            <div id="p9" class="back">PAGE 9 <span class="capt">Singapore</span>

            </div>
            <div id="p8" class="front">PAGE 8 <span class="capt">Siem Reap</span>

            </div>
        </div>
        <!--Idx 3-->
        <div class="page right">
            <div id="p7" class="back">PAGE 7 <span class="capt">KL</span>

            </div>
            <div id="p6" class="front">PAGE 6 <span class="capt">Koh Chang</span>

            </div>
        </div>
        <!--Idx 4-->
        <div class="page right">
            <div id="p5" class="back">PAGE 5 <span class="capt">Hong Kong</span>

            </div>
            <div id="p4" class="front">PAGE 4...

CSS

/*****************************************
page reset
*****************************************/
 * {
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
/*****************************************
basic
*****************************************/
 html, body {
    height:100%;
    width:100%;
    font-family:cursive;
}
body {
    background-color:lightgray;
    /*perspective*/
    -webkit-perspective:1500;
    -moz-perspective:1500;
    -ms-perspective:1500;
    -o-perspective:1500;
    perspective:1500;
    /*perspective-origin*/
    -webkit-perspective-origin:bottom;
    -moz-perspective-origin:bottom;
    -ms-perspective-origin:bottom;
    -o-perspective-origin:bottom;
    perspective-origin:bottom;
}
#places {
    margin-left: 25px;
    margin-top: 25px;
}
#main_wrapper {
    position:relative;
    margin:25px auto;
    width:1000px;
    height:550px;
    border: 1px solid grey;
    /*transform*/
    -webkit-transform:rotateX(10deg);
    -moz-transform:rotateX(10deg);
    -ms-transform:rotateX(10deg);
    -o-transform:rotateX(10deg);
    transform:rotateX(10deg);
    /*transform-style*/
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    z-index:0;
}
#nav {
    width:100%;
    height:40px;
    font-size:2em;
    font-weight:800;
    text-align:center;
}
#nav span {
    width: 30px;
    height: 30px;
    border:1px solid black;
    margin:0 50px;
    border-radius:50%;
}
/*****************************************
page stack static layout
*****************************************/

/*select anything with 'page' in the class name, but here same as '.page' */
 div[class*="page"], .first, .last {
    position:absolute;
    top:18px;
    height:515px;
    width:465px;
    font-size:2em;
    font-weight:bold;
    background-color:#ab966e;
    opacity:1;
   ...

JavaScript

//NAVIGATION ARROWS 
$("#left_arrow").on("click", function () {
    turnLeftPage();
});

$("#right_arrow").on("click", function () {
    turnRightPage();
});

//on PAGE CLICK-navigation. Is it possible to disable for firefox?? (updt.:seems to work now)
$(".page").click(function () {
    // check if page has been turned over
    if ($(this).hasClass("turned")) {
        // turn page back to original position
        turnLeftPage();

        // else page IS in original position on right 
    } else {
        // turn over to the left
        turnRightPage();
    };
});

// turns over right page    
function turnRightPage(callback) {
    var $page = $(".turned").prev(".page:not(.last)");

    $page.css({
        "transform": "rotateY(-180deg)",
        "transform-origin": "left"
    });

    var turnedZindex = parseInt($(".turned").css("z-index"));
    // time visibility of top page in line w. transition time     
    $page.css("z-index", turnedZindex + 1);

    //change class AFTER transition (frm. treehouse-site)
    $page.on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
        $page.unbind('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
        
        //need to double-set z-index or else secondtime turning page open setting z-index does not work (tried in Chrome 38.0.2125.111 m)
        $page.css("z-index", turnedZindex + 1);
        $(".turned").removeClass("turned");
        $page.addClass("turned");

        if(typeof callback == "function") {
            callback.call();
        }
    });
}

// turns over left page
function turnLeftPage(callback) {
    var $page = $(".turned:not(.first)");

    $page.css({
        "transform": "rotateY(0deg)",
        "transform-origin": "left"
    });

    // lower page number is next in markup 
    var $prevPage = $page.next();
    var currentZindex = parseInt($page.css("z-index"));
    // after turning change class and z-index        
...