JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabMenuContainer" id="content">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</div>
<div id="pagingControls"></div>

CSS

#pagingControls {
	float: right;
}
#pagingControls span{
	color: #0F3765;
	line-height: 16px;
	}
#pagingControls ul{display:inline;padding-left:0.5em}
#pagingControls li {display:inline;padding:0 0.5em}
#pagingControls a{color: #0F3765;}

JavaScript

var Imtech = {};
Imtech.Pager = function() {
//this.paragraphsPerPage = 3;
this.currentPage = 1;
this.pagingControlsContainer = '#pagingControls';
this.pagingContainerPath = '#content';

this.numPages = function() {
numPages = 0;
if (this.paragraphs != null && this.paragraphsPerPage != null) {
numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
}
return numPages;
};

this.showPage = function(page) {
    this.currentPage = page;
    html = '';
    this.paragraphs.slice((page-1) * this.paragraphsPerPage,((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
        html += "<div class='main_result_container'>" + $(this).html() + "</div>";
    });
    $(this.pagingContainerPath).html(html);
    renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}

var renderControls = function(container, currentPage, numPages) {
var pagingControls = '<span>Page: </span><ul>';
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
} else {
pagingControls += '<li>' + i + '</li>';
}
}

pagingControls += '</ul>';
$(container).html(pagingControls);
}
}

pager = new Imtech.Pager();
pager.paragraphsPerPage = 3; // set amount elements per page
pager.pagingContainer = $('#content'); // set of main container
pager.paragraphs = $('li', pager.pagingContainer); // set of required containers
pager.showPage(1);