JSFiddle - React, Tailwind, and code Playground

HTML

<h1>jQuery Pajinate</h1>        

<div id="wrapper">
    <div id="paging_container1" class="container">
        <h2>Vanilla</h2>
        <div class="page_navigation"></div>
        
        <ul class="content">
            <li><p>One</p></li> 
            <li><p>Two</p></li> 
            <li><p>Three</p></li> 
            <li><p>Four</p></li> 
            <li><p>Five</p></li> 
            <li><p>Six</p></li> 
            <li><p>Seven</p></li> 
            <li><p>Eight</p></li> 
            <li><p>Nine</p></li> 
            <li><p>Ten</p></li> 
            <li><p>Eleven</p></li> 
            <li><p>Twelve</p></li> 
            <li><p>Thirteen</p></li> 
            <li><p>Fourteen</p></li> 
            <li><p>Fifteen</p></li> 
            <li><p>Sixteen</p></li> 
        </ul>    
    </div>    
    
    <div id="paging_container3" class="container">
        <h2>Custom List Size</h2>
        <div class="alt_page_navigation"></div>
        
        <ul class="alt_content">
            <li><p>One</p></li> 
            <li><p>Two</p></li> 
            <li><p>Three</p></li> 
            <li><p>Four</p></li> 
            <li><p>Five</p></li> 
            <li><p>Six</p></li> 
            <li><p>Seven</p></li> 
            <li><p>Eight</p></li> 
            <li><p>Nine</p></li> 
            <li><p>Ten</p></li> 
            <li><p>Eleven</p></li> 
            <li><p>Twelve</p></li> 
            <li><p>Thirteen</p></li> 
            <li><p>Fourteen</p></li> 
            <li><p>Fifteen</p></li> 
            <li><p>Sixteen</p></li> 
        </ul>    
        
    </div>
    
    
    <div id="paging_container2" class="container">
        <h2>Two Nav Panels</h2>
        <div class="page_navigation"></div>
        
        <ul class="content">
            <li><p>One</p></li> 
            <li><p>Two</p></li> 
            <li><p>Three</p></li> 
            <li><p>Four</p></li> 
            <li><p>Five</p></li> 
            <li><p>Six</p></li> 
            <li><p>Seven</p></li> 
 ...

CSS

* {
    margin: 0;
    padding: 0;
}

body{
    font-family: Verdana;
    font-size: 12px;
    background-color: black;
    text-align: center;
    height: 100%;
}

div{
    overflow: auto;
}

h1, h2 {
    font-family: Georgia;
    font-style: italic;
}

h2{
    font-size: 16px;    
    color: #333333;
    padding-bottom: 5px;
}

h1{
    padding: 10px;
    font-size: 36px;
    color: white;
}

li{
    list-style: none;    
}

#wrapper{
    margin: 0px auto;
    text-align: left;
    width: 960px;
}

#paging_container1{
    height: 320px;    
}

#paging_container2{
    height: 356px;    
}

#paging_container3{
    height: 190px;
}

#paging_container4{
    height: 307px;    
    overflow: hidden;
}

.ellipse{
    float: left;
}

.container{
    width: 260px;
    float: left;
    margin: 50px 10px 10px;
    padding: 20px;
    background-color: white;
}

.page_navigation , .alt_page_navigation{
    padding-bottom: 10px;
}

.page_navigation a, .alt_page_navigation a{
    padding:3px 5px;
    margin:2px;
    color:white;
    text-decoration:none;
    float: left;
    font-family: Tahoma;
    font-size: 12px;
    background-color:#DB5C04;
}
.active_page{
    background-color:white !important;
    color:black !important;
}    

.content, .alt_content{
    color: black;
}

.content li, .alt_content li, .content > p{
    padding: 5px
}

JavaScript

;(function($){
    /*******************************************************************************************/    
    // jquery.pajinate.js - version 0.2
    // A jQuery plugin for paginating through any number of DOM elements
    // 
    // Copyright (c) 2010, Wes Nolte (http://wesnolte.com)
    // Liscensed under the MIT License (MIT-LICENSE.txt)
    // http://www.opensource.org/licenses/mit-license.php
    // Created: 2010-04-16 | Updated: 2010-04-26
    /*******************************************************************************************/
    
    $.fn.pajinate = function(options){
        // Set some state information
        var current_page = 'current_page';
        var items_per_page = 'items_per_page';
        
        var meta;
        
        // Setup default option values
        var defaults = {
            item_container_id : '.content',
            items_per_page : 10,            
            nav_panel_id : '.page_navigation',
            num_page_links_to_display : 20,            
            start_page : 0,
            nav_label_first : 'First',
            nav_label_prev : 'Prev',
            nav_label_next : 'Next',
            nav_label_last : 'Last'
        };
        var options = $.extend(defaults,options);
        var $item_container;
        var $page_container;
        var $items;
        var $nav_panels;
        
        return this.each(function(){
            $page_container = $(this);
            $item_container = $(this).find(options.item_container_id);
            $items = $page_container.find(options.item_container_id).children();
            meta = $page_container;
            
            // Initialise meta data
            meta.data(current_page,0);
            meta.data(items_per_page, options.items_per_page);
            
            // Get the total number of items
            var total_items = $item_container.children().size();
            
            // Calculate the number of pages needed
            var...