JSFiddle - React, Tailwind, and code Playground

HTML

<strong>Output Information:</strong>
<div id="pagination-count"></div>

<ul class="list">
    <li>SAMPLE REPLY 1</li>
    <li>SAMPLE REPLY 2</li>
    <li>SAMPLE REPLY 3</li>
    <li>SAMPLE REPLY 4</li>
    <li>SAMPLE REPLY 5</li>
    <li>SAMPLE REPLY 6</li>
    <li>SAMPLE REPLY 7</li>
    <li>SAMPLE REPLY 8</li>
    <li>SAMPLE REPLY 9</li>
    <li>SAMPLE REPLY 10</li>
    <li>SAMPLE REPLY 11</li>
    <li>SAMPLE REPLY 12</li>
    <li>SAMPLE REPLY 13</li>
    <li>SAMPLE REPLY 14</li>
    <li>SAMPLE REPLY 15</li>
    <li>SAMPLE REPLY 16</li>
    <li>SAMPLE REPLY 17</li>
    <li>SAMPLE REPLY 18</li>
    <li>SAMPLE REPLY 19</li>
    <li>SAMPLE REPLY 20</li>
    <li>SAMPLE REPLY 21</li>
    <li>SAMPLE REPLY 22</li>
    <li>SAMPLE REPLY 23</li>
    <li>SAMPLE REPLY 24</li>
    <li>SAMPLE REPLY 25</li>
    <li>SAMPLE REPLY 26</li>
    <li>SAMPLE REPLY 27</li>
    <li>SAMPLE REPLY 28</li>
    <li>SAMPLE REPLY 29</li>
    <li>SAMPLE REPLY 30</li>
    <li>SAMPLE REPLY 31</li>
    <li>SAMPLE REPLY 32</li>
    <li>SAMPLE REPLY 33</li>
    <li>SAMPLE REPLY 34</li>
    <li>SAMPLE REPLY 35</li>
    <li>SAMPLE REPLY 36</li>
    <li>SAMPLE REPLY 37</li>
    <li>SAMPLE REPLY 38</li>
    <li>SAMPLE REPLY 39</li>
    <li>SAMPLE REPLY 40</li>
</ul>

<ul id="pagination-links"></ul>

CSS

.paged {
    display: none !important;
}

#pagination-links {
    text-align: left;
}

#pagination-links li {
    display: inline-block;
    margin: 0 2px;
}

.pglink, .prevnextlink {
    display: block;
    padding: 5px;
    background: #333;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    width: 20px;
}

.prevnextlink {
    width: 40px
}

.pglink:hover, .prevnextlink:hover {
    background: #555;
}

.currentpglink {
    background: #F00;
}

JavaScript

// JQUERY PAGINATION IMITATION
// BY CHEYNE SUTHERLAND - 2014

function pagination(currentPage) {
    
    var theContent = 'ul.list li';                 // the stuff you want to paginate
    var linksContainer = '#pagination-links';      // the container for the links
    var outputContainer = '#pagination-count';     // the container for the output
    var activeClass = 'page-item';                 // the class for active items
    var inactiveClass = 'paged';                   // the class for inactive items
    var prevID = 'prevpglink';                     // the ID for the prev link
    var nextID = 'nextpglink';                     // the ID for the next link
    var prevnextClass = 'prevnextlink';            // the class for the prev/next links
    var linkClass = 'pglink';                      // the class for the pagination links
    var currentLink = 'currentpglink';             // the class for the current page link
    var perPage = 5;                               // the number of items to show per page
    var offset = 3;                                // the range of page links to show
    var prevText = '&larr;';                       // the text for the prev link
    var nextText = '&rarr;';                       // the text for the next link
    
    // THERE IS NO NEED TO REALLY EDIT BEYOND THIS POINT HOWEVER IF YOU WANT TO EDIT THE
    // OUTPUT CONTAINER HTML, YOU CAN SCROLL DOWN TO THE END TO DO SO
   
    
    // MATH FUNCTIONS TO GET TOTALS
    
    if(currentPage == undefined) {
        var currentPage = 1;
    }
    
    var totalItems = $(theContent).size();
    var totalPages = Math.ceil(totalItems / perPage);
    var itemsOnPage = $(theContent+'.'+activeClass).size();
    var start = (perPage * currentPage + 1) - perPage;
    var end = (perPage * currentPage);
    var offsetMin = (currentPage - offset);
    var offsetMax = (currentPage + offset);
    
    if(currentPage == totalPages) {
         end = totalItems;
    }
    
    //...