JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="records">
    <li><div>record 1</div></li>
    <li><div>record 2</div></li>
    <li><div>record 3</div></li>
    <li>
        <div>record 4</div>
    </li>
    <li>
        <div>record 5</div>
    </li>
    <li>
        <div>record 6</div>
    </li>
    <li>
        <div>record 7</div>
    </li>
    <li>
        <div>record 8</div>
    </li>
    <li>
        <div>record 9</div>
    </li>
    <li>
        <div>record 10</div>
    </li>
    <li>
        <div>record 11</div>
    </li>
    <li>
        <div>record 12</div>
    </li>
    <li>
        <div>record 13</div>
    </li>
</ul>
<ul class="pagination">
    <li><a class="prev" href="#">prev</a></li>
    <li><a class="pagenum" href="#">1</a></li>
    <li><a class="pagenum" href="#">2</a></li>
    <li><a class="pagenum" href="#">3</a></li>
    <li><a class="pagenum" href="#">4</a></li>
    <li><a class="pagenum" href="#">5</a></li>
    <li><a class="pagenum" href="#">6</a></li>
    <li><a class="next" href="#">next</a></li>
</ul>

CSS

ul {margin: 0; padding: 0;list-style-type:none;}
ul.records > li {
        height: 50px;
    background: grey;
    margin: 5px;
    list-style-type:none;
    padding: 5px;
    
}
ul.pagination > li {float:left;margin: 5px;}

JavaScript

var currentPage = 1;
var totRecords = $('ul.records li').size();
var recPerPage = 2;
var numOfPages = Math.ceil(totRecords/recPerPage);

$('.pagination li .pagenum').on('click', function(e) {
    e.preventDefault();
    currentPage = $(this).text();
    showPage();
});

$('.pagination li .prev').on('click', function(e) {
    e.preventDefault();
    currentPage = currentPage - 1;
    showPage();
});
$('.pagination li .next').on('click', function(e) {
    e.preventDefault();
    currentPage++;
    showPage();
});

$('ul.pagination li a:contains("1")').click();

function showPage() {
    if(currentPage > 1) {
        //then show prev btn
        $('ul.pagination > li .prev').show();
    } else { //hide
        $('ul.pagination > li .prev').hide();
    }
    if(currentPage < numOfPages) {
        //then show next btn
        $('ul.pagination > li .next').show();
    } else { //hide
        $('ul.pagination > li .next').hide();
    }
    $('ul.records li').hide(); //hide all records
    var startRecIndx = recPerPage * (currentPage - 1);
    var lastRecIndx = (startRecIndx + recPerPage - 1);
    $('ul.records li').each(function(indx, elem) {
        if(indx >= startRecIndx && indx <= lastRecIndx) {
            $(elem).show();
        }
    });   
}