JSFiddle - React, Tailwind, and code Playground

by infatti

HTML

<div id='paging1'>  
    <p>1Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p>  
    <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p>  
    <p>Pellentesque ac sem ac sem tincidunt euismod.</p>  
    <p>2Duis hendrerit purus vitae nibh tincidunt bibendum.</p>  
    <p>Nullam in nisi si  ipsum m in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  i dolor sit amet, consectetur adipiscin  ipsum dolor sit amet, consectetur adipiscin  ipsum dolor sit amet, consectetur adipiscin ipsum dolor sit amet, consectetur adipiscin ipsum dolor sit amet, consectetur adipiscint amet velit placerat laoreet.</p>    
    <p>Nulla sed purus et tellus convallis scelerisque.</p>  
    <p>Nam at justo ut ante consectetur faucibus.</p>  
    <p>Proin dapibus nisi a quam interdum lobortis.</p>  
    <p>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</p>  
    <p>Mauris auctor suscipit tellus, at sodales nisi blandit sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet mollis mauris eget dictum. Ut blandit ipsum eget libero gravida egestas sit amet eu lacus. Vivamus vulputate egestas faucibus. Suspendisse imperdiet nisl vel purus suscipit placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed orci dolor. Nunc vitae nisl in sapien sollicitudin porttitor. Vivamus orci felis, rhoncus in sollicitudin vitae, congue eget ante. Curabitur eget elementum massa. Nunc porta fermentum ante, et venenatis tortor placerat nec. Aenean molestie ornare blandit. Fusce condimentum tempus massa, auctor pretium arcu facilisis vitae. Pellentesque faucibus scelerisque risus, id consectetur risus porttitor in.</p> ...

CSS

#content {width:500px;}
.pagination {list-style:none; margin:10px 0px 0px 0px; padding:0px; clear:both;}
.pagination li{float:left; margin:3px;}
.pagination li a{   display:block; padding:3px 5px; color:#fff; background-color:#44b0dd; text-decoration:none;}
.pagination li a.active {border:1px solid #000; color:#000; background-color:#fff;}
.pagination li a.inactive {background-color:#eee; color:#777; border:1px solid #ccc;}

JavaScript

(function($){
    $.fn.jPaginate = function(options) {
        var defaults = {
            items: 4,
            next: "Next",
            previous: "Previous",
            active: "active",
            pagination_class: "pagination",
            minimize: false,
            nav_items: 6,
			cookies: true,
			position: "after",
			equal: false,
			offset: 50
        };
        var options = $.extend(defaults, options);

        return this.each(function() {
            // object is the selected pagination element list
            obj = $(this);
            // this is how you call the option passed in by plugin of items
            var show_per_page = options.items;
            //getting the amount of elements inside parent element
            var number_of_items = obj.children().size();
            //calculate the number of pages we are going to have
            var number_of_pages = Math.ceil(number_of_items/show_per_page);
            
			//create the pages of the pagination
            var array_of_elements = [];
            var numP = 0;
            var nexP = show_per_page;
			
			var height = 0;
			var max_height = 0;
            //loop through all pages and assign elements into array
            for (i=1;i<=number_of_pages;i++)
            {    
                array_of_elements[i] = obj.children().slice(numP, nexP);
				
				if (options.equal) {	
					obj.children().slice(numP, nexP).each(function(){
						height += $(this).outerHeight(); 
					});
					if (height > max_height) max_height = height;
					height = 0;
				}
				
                numP += show_per_page;
                nexP += show_per_page;
            }
			if (options.equal) {	
				max_height += options.offset;
				obj.css({"height":max_height});
			}
			
			
            // display first page and set first cookie
			if (options.cookies == true) {
				if (get_cookie("current")) {
					showPage(get_cookie("current"));
					createPagination(get_cookie("current"));
				} else {
					set_cookie(...