JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <table class="table table-striped">
       
        <ul>
            <li style="display: none;">
                <td>id0</td>
                <td>name0</td>
                <td>description0</td>
            </li>
            <li style="display: none;">
                <td>id1</td>
                <td>name1</td>
                <td>description1</td>
            </li>
            <li style="display: table-row;">
                <td>id2</td>
                <td>name2</td>
                <td>description2</td>
            </li>
            <li style="display: table-row;">
                <td>id3</td>
                <td>name3</td>
                <td>description3</td>
            </li>
            <li style="display: none;">
                <td>id4</td>
                <td>name4</td>
                <td>description4</td>
            </li>
            <li style="display: none;">
                <td>id5</td>
                <td>name5</td>
                <td>description5</td>
            </li>
            <li style="display: none;">
                <td>id6</td>
                <td>name6</td>
                <td>description6</td>
            </li>
            <li style="display: none;">
                <td>id7</td>
                <td>name7</td>
                <td>description7</td>
            </li>
            <li style="display: none;">
                <td>id8</td>
                <td>name8</td>
                <td>description8</td>
            </li>
            <li style="display: none;">
                <td>id9</td>
                <td>name9</td>
                <td>description9</td>
            </li>
            <li style="display: none;">
                <td>id10</td>
                <td>name10</td>
                <td>description10</td>
            </li>
            <li style="display: none;">
                <td>id11</td>
                <td>name11</td>
                <td>description11</td>
            </li>
            <li style="display: none;">
 ...

CSS

/*
 PLUGIN STYLE
*/
/*
 * This file is part of the dozoisch/paginator
 *
 * (C) 2013 Hugo Dozois-Caouette
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
/*
 *  Document   : css
 *  Author     : dozoisch
 *  version    : 1.2.3
 *  Description: Simple stylesheet for the paginator plugin
 */

.paginateContainer {
    display : block;
    text-align: center;
}

.paginateContainer .paginateList,
.paginateContainer .paginateShowAllList{
    display: inline-block;
}

.paginateContainer  li{
    display: inline-block;
}

.paginateContainer .paginateAnchor{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-decoration: none;
    cursor: pointer;

    line-height: 20px;
    padding: 4px 12px;
    background-color: #ddd;
    color: #08c;
    font-size : 16px;
    min-width: 16px;
    float: left;

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    /* Select None */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.paginateContainer .paginateAnchor:hover {
    color : #fff;
    background-color: #2ae;
    border-top: 1px solid #2ae;
    border-bottom: 1px solid #2ae;
}

.paginateContainer .paginatePrevious .paginateAnchor{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 1px solid #ccc;
    font-size : 18px;
    font-weight: bold;
}

.paginateContainer .paginateNext .paginateAnchor {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid #ccc;
    font-size : 18px;
    font-weight: bold;
}

.paginateContainer .paginatePrevious .paginateAnchor:hover,
.paginateContainer .paginateNext .paginateAnchor:hover {
    border: 1px solid #2ae;
}

.paginateContainer .paginateShowAllList .paginateAnchor {
    border-radius: 10px;
    font-size: 18px;
   ...

JavaScript

/*
 * This file is part of the dozoisch/paginator
 *
 * (C) 2013 Hugo Dozois-Caouette
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
/**
 * @author dozoisch
 * @version 1.2.3
 * @url github.com/dozoisch/paginator
 *
 * @param {object} $ jQuery library
 * @param {object} Math The Math library
 * @returns {object} Returns the table for chainability
 */
(function ($, Math) {
    "use strict";

    var prefix = 'paginate';

    var defaults = {
        'elemsPerPage': 5,
        'maxButtons': 5,
        //Css classes
        'disabledClass': prefix + 'Disabled',
        'activeClass': prefix + 'Active',
        'containerClass': prefix + 'Container',
        'listClass': prefix + 'List',
        'showAllListClass': prefix + 'ShowAllList',
        'previousClass': prefix + 'Previous',
        'nextClass': prefix + 'Next',
        'previousSetClass': prefix + 'PreviousSet',
        'nextSetClass': prefix + 'NextSet',
        'showAllClass': prefix + 'ShowAll',
        'pageClass': prefix + 'Page',
        'anchorClass': prefix + 'Anchor',
        //Text on buttons
        'previousText': '&laquo;',
        'nextText': '&raquo;',
        'previousSetText': '&hellip;',
        'nextSetText': '&hellip;',
        'showAllText': '&dArr;'
    };

    var methods = {
        init: function (options) {

            var table = $(this);
            if (table.data(prefix)) {
                return table;
            }
            var paginator = new Paginator(this, options);

            table.data(prefix, paginator);

            return this;
        },
        update: function (pageNumber) {
            $(this).data(prefix).rebuild().showPage(pageNumber || 1);
            return this;
        },
        changeSettings: function (options, pageNumber) {
            $(this).data(prefix).updateConfig(options || {}).showPage(pageNumber || 1);
            return this;
        },
        destroy:...