JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="content">1 theinlwin</div>
<div class="content">2 theinlwin</div>
<div class="content">3 theinlwin</div>
<div class="content">4 theinlwin</div>
<div class="content">5 theinlwin</div>
<div class="content">6 theinlwin</div>
<div class="content">7 theinlwin</div>
<div class="content">8 theinlwin</div>
<div class="content">9 theinlwin</div>
<div class="content">10 theinlwin</div>
<div class="content">11 theinlwin</div>
<div class="content">12 theinlwin</div>
<div class="content">13 theinlwin</div>
<div class="content">14 theinlwin</div>
<div class="content">15 theinlwin</div>
<div class="content">16 theinlwin</div>
<div class="content">17 theinlwin</div>
<div class="content">18 theinlwin</div>
<div class="content">19 theinlwin</div>
<div class="content">20 theinlwin</div>
<div class="content">21theinlwin</div>
<div class="content">21 theinlwin</div>
<div class="content">22 theinlwin</div>
<div class="content">23 theinlwin</div>
<div class="content">24 theinlwin</div>
<div class="content">25 theinlwin</div>
<div class="content">26theinlwin</div>
<div class="content">27 theinlwin</div>
<div class="content">28 theinlwin</div>
<div class="content">29 theinlwin</div>
<div class="content">30 theinlwin</div>


<ul id="pagin">
          
</ul>

CSS

.content {
    margin: 1px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
    background-color: gray;
    margin-bottom:20px;
}

#pagin {
    clear: both;
    margin:20px auto;
}
#pagin:after{
    display:table;
    clear:both;
    content:"";
}
#pagin li {
    float:left;
    margin-right:10px;
    list-style:none;
}
#pagin li a {
    display:block;
    color:#717171;
    font:bold 11px;
    text-shadow:0px 1px white;
    padding:5px 8px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    background:#f9f9f9;
    background:-webkit-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-moz-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-o-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-ms-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9',endColorstr='#e8e8e8',GradientType=0 );
}
#pagin li a.current {
    color:white;
    text-shadow:0px 1px #3f789f;
    -webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    -moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    background:#7cb9e5;
    background:-webkit-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-moz-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-o-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-ms-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5',endColorstr='#57a1d8',GradientType=0 );
}
#pagin li a:hover {
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    -moz-box-shadow:0px 1px...

JavaScript

var currentpage = 1;
var pagecount = 0;

function showpage(page) {
    $('.content').hide();
    $('.content').eq((page-1)*6).show().next().show().next().show().next().show().next().show().next().show();
    $('#pagin').find('a').removeClass('current').eq(page).addClass('current');

}

$("#pagin").on("click", "a", function(event){
    event.preventDefault();
    
    if($(this).html() == "next") {
        currentpage++;
    }
    else if($(this).html() == "prev") {
        currentpage--;
    }
    else if($(this).html() == "prevAll"){
        currentpage.nextAll();
    }
    else if($(this).html() == "prevAll"){
        currentpage.prevAll();
    }
    else {
        currentpage = $(this).html();
    }
    if(currentpage < 1) {
        currentpage = 1;
    }
    if(currentpage > pagecount) {
        currentpage = pagecount;
    }
    showpage(currentpage);
});                                                                  

$(document).ready(function() {
    pagecount = Math.floor(($('.content').size()) / 6);
    if (($('.content').size()) % 6 > 0) {
        pagecount++;
    }
	
    $('#pagin').html('<li><a>prevAll</a></li><li><a>prev</a></li>');
    for (var i = 1; i <= pagecount; i++) {
        $('#pagin').append('<li><a class="current">' + i + '</a></li>');
    }
    $('#pagin').append('<li><a>next</a></li><li><a>nextAll</a></li>');
    showpage(1);
});