JSFiddle - React, Tailwind, and code Playground

HTML

<input type='hidden' id='current_page' />
<input type='hidden' id='per_page' />

<div id='en1'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.1</p>
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.2</p>
    <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.3</p>
    <p>Pellentesque ac sem ac sem tincidunt euismod.4</p>
    <p>Duis hendrerit purus vitae nibh tincidunt bibendum.5</p>
    <p>Nullam in nisi sit amet velit placerat laoreet.6</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.1</p>
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.2</p>
    <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.3</p>
    <p>Pellentesque ac sem ac sem tincidunt euismod.4</p>
    <p>Duis hendrerit purus vitae nibh tincidunt bibendum.5</p>
    <p>Nullam in nisi sit amet velit placerat laoreet.6</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.1</p>
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.2</p>
    <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.3</p>
    <p>Pellentesque ac sem ac sem tincidunt euismod.4</p>
    <p>Duis hendrerit purus vitae nibh tincidunt bibendum.5</p>
    <p>Nullam in nisi sit amet velit placerat laoreet.6</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.1</p>
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.2</p>
    <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.3</p>
    <p>Pellentesque ac sem ac sem tincidunt euismod.4</p>
    <p>Duis hendrerit purus vitae nibh tincidunt bibendum.5</p>
    <p>Nullam in nisi sit amet velit placerat laoreet.6</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.1</p>
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.2</p>
    <p>Curabitur a ipsum ut elit porttitor egestas non...

CSS

#page_navigation a{
    padding:3px;
    border:1px solid gray;
    margin:2px;
    color:black;
    text-decoration:none
}
.active_page{
    background:red;
    color:#fff;
}

JavaScript

$(document).ready(function() {

    var per_page = 6;
    var num_item = $('#en1').children().size();
    var num_page = Math.ceil(num_item / per_page);

    $('#current_page').val(0);
    $('#per_page').val(per_page);

    var navigation_html = '';
    var current = 0;
    while (num_page > current) {
        navigation_html += '<a class="page_link" href="javascript:paginate(' + current + ')" longdesc="' + current + '">' + (current + 1) + '</a>';
        current++;
    }


    $('#page_navigation').html(navigation_html);
    $('#page_navigation .page_link:first').addClass('active_page');
    $('#en1').children().css('display', 'none');
    $('#en1').children().slice(0, per_page).css('display', 'block');

});


function paginate(page_num) {
    var per_page = parseInt($('#per_page').val());
    start = page_num * per_page;
    finish = start + per_page;
    $('#en1').children().css('display', 'none').slice(start, finish).css('display', 'block');
    $('.page_link[longdesc=' + page_num + ']').addClass('active_page').siblings('.active_page').removeClass('active_page');
    $('#current_page').val(page_num);
}