JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='prev'>Previous</button>
<span id='page'>0</span>
<button id='next'>Next</button>
<div id='displayer' style='height: 100%; width: 100%; border: 1px solid black; overflow: hidden;'>
    <div id='epub_container' style=''>
    Lorem ipsum dolor sit amet consectetur adipiscing elit vestibulum, pulvinar auctor platea hendrerit neque placerat convallis laoreet libero, rutrum augue nisi odio mi mollis feugiat. Porta consequat mollis ad lobortis magna lacinia netus non placerat, senectus euismod duis ullamcorper sodales vel primis id, suspendisse hac morbi eu habitant sem nulla integer. Neque ut vel commodo tempus aenean feugiat ornare fringilla accumsan senectus gravida, convallis curabitur nam sociis pretium egestas per curae inceptos velit morbi, mattis class netus risus diam ac scelerisque nibh magna lobortis. Praesent tempor imperdiet tempus per mollis, tellus nullam fringilla quam, orci tortor ridiculus vivamus.

    Nec tellus nam habitant metus bibendum aliquam, justo netus in ornare imperdiet massa cras, ligula suscipit est duis enim. Curabitur sodales elementum torquent proin non metus scelerisque semper, posuere at facilisi lacinia mattis dis ultricies vulputate, pellentesque luctus potenti tortor mus eros vitae. Nostra vehicula nullam iaculis leo imperdiet dignissim augue fermentum feugiat, egestas sed nibh non est libero eros purus.

    Et aliquet posuere senectus sociosqu dui sem mattis facilisi arcu justo, ante pharetra ut hac egestas massa nullam facilisis. Eget consequat at platea congue placerat phasellus habitasse primis, eros porta luctus turpis libero bibendum nullam aenean, nunc laoreet aptent tincidunt quisque posuere ac. Cras volutpat sodales montes libero est tristique, blandit lobortis cum purus habitant, mollis in tempor ac dictumst. Morbi diam per quis placerat habitant faucibus nunc fringilla, lacus natoque nam lacinia molestie tortor integer...

JavaScript

var m_page = 0;
    
    var data = {
        csrf_token_name_markin: '<?php echo $this->security->get_csrf_hash(); ?>'
    };
    
    $(function() {
        move_to_page();
    });
        
    $(window).resize(function() {
        move_to_page();
    });
    
    function move_to_page() {
        var height = window.innerHeight;
        var width = window.innerWidth;
        
        var $displayer = $('#displayer');
        var offset = $displayer.offset();
        $displayer.height(height - offset.top - 5);
        
        var $epub = $('#epub_container');
        var offset_top = offset.top - $displayer.height() * m_page;
        $epub.offset({top: offset_top, left: offset.left});
    }
    
    $(document).on('click', '#prev', function() {
        if (m_page > 0) {
            --m_page;
            $('#page').text(m_page);
        }
        move_to_page();
    });
    $(document).on('click', '#next', function() {
        $('#page').text(++m_page);
        move_to_page();
    });