JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">リストのサンプル</h3>
	</div>
	<ul class="list-group">
		<li class="list-group-item">リスト 1</li>
		<li class="list-group-item">リスト 2</li>
		<li class="list-group-item">リスト 3</li>
		<li class="list-group-item">リスト 4</li>
		<li class="list-group-item">リスト 5</li>
		<li class="list-group-item">リスト 6</li>
    <li class="list-group-item">リスト 7</li>
    <li class="list-group-item">リスト 8</li>
    <li class="list-group-item">リスト 9</li>
    <li class="list-group-item">リスト 10</li>
    <li class="list-group-item">リスト 11</li>
    <li class="list-group-item">リスト 12</li>
    <li class="list-group-item">リスト 13</li>
    <li class="list-group-item">リスト 14</li>
    <li class="list-group-item">リスト 15</li>
    <li class="list-group-item">リスト 16</li>
    <li class="list-group-item">リスト 17</li>
    <li class="list-group-item">リスト 18</li>
    <li class="list-group-item">リスト 19</li>
    <li class="list-group-item">リスト 20</li>
    <li class="list-group-item">リスト 21</li>
    <li class="list-group-item">リスト 22</li>
    <li class="list-group-item">リスト 23</li>
    <li class="list-group-item">リスト 24</li>
    <li class="list-group-item">リスト 25</li>
    <li class="list-group-item">リスト 26</li>
    <li class="list-group-item">リスト 27</li>
    <li class="list-group-item">リスト 28</li>
    <li class="list-group-item">リスト 29</li>
    <li class="list-group-item">リスト 30</li>
    <li class="list-group-item">リスト 31</li>
    <li class="list-group-item">リスト 32</li>
    
	</ul>
</div>
</div>

CSS

.panel{width:500px;margin:auto;margin-top:20px;}

JavaScript

/**
 * jQuery Paginathing
 * Paginate Everything
 *
 * @author Alfred Crosby <https://github.com/alfredcrosby>
 * Inspired from http://esimakin.github.io/twbs-pagination/
 *
 * Copyright (c) 2018 Alfred Crosby
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

(function($, window, document) {
  'use strict';

  var Paginator = function(element, options) {
    this.el = $(element);
    this.options = $.extend({}, $.fn.paginathing.defaults, options);

    this.startPage = 1;
    this.currentPage = 1;
    this.totalItems = this.el.children().length;
    this.totalPages = Math.max(Math.ceil(this.totalItems / this.options.perPage), this.options.limitPagination);
    this.container = $('<nav></nav>').addClass(this.options.containerClass);
    this.ul = $('<ul></ul>').addClass(this.options.ulClass);

    this.show(this.startPage);

    return this;
  };

  Paginator.prototype = {
    pagination: function(type, page) {
      var _self = this;
      var li = $('<li></li>');
      var a = $('<a></a>').attr('href', '#');
      var cssClass = type === 'number' ? _self.options.liClass : type;
      var text = '';
      if (type === 'number') {
        text = page;
      } else if (type === 'pageNumbers') {
        // get the page numbers text
        text = _self.paginationNumbersText();
      } else {
        text = _self.paginationText(type);
      }

      li.addClass(cssClass);
      li.data('pagination-type', type);
      li.data('page', page);
      li.append(a.html(text));

      return li;
    },

    paginationText: function(type) {
      return this.options[type + 'Text'];
    },

    paginationNumbersText: function() {
      var _self = this;
      return 'Page ' + _self.currentPage + '/' + _self.totalPages;
    },

    buildPagination: function() {
      var _self = this;
      var pagination = [];
      var prev =
        _self.currentPage - 1 < _self.startPage
          ?...