JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="page-numbers">
<span class="prev number" onclick="GoTo('prev')" style="display: none;">prev</span>
 <span class="number numbering bold" onclick="GoTo(1);">1</span>  <span class="number  numbering" onclick="GoTo(2);">2</span>  <span class="number  numbering" onclick="GoTo(3);">3</span> 
<span class="next number" onclick="GoTo('next');">next</span>
</div>

CSS

.front-pro.hidden{ display:none !important; }
.prev {
  display: none;
}

.page-numbers .number{ color:#fff;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top,  #a90329 0%, #6d0019 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #a90329 0%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #a90329 0%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */ /* IE6-9 */
padding:4px; border-radius:4px; border:2px solid #a90329;
}
.page-numbers{ text-align:center; margin:5px 0 10px 0; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none; }
.page-numbers .number.bold{ font-weight:bold; background:#000; }
.page-numbers .number:hover{ background:#000; cursor: pointer; }
 
.titel-2{ margin-top:1px; }
body{ background-attachment: fixed; }

JavaScript

function GoTo(nn) {
	  var nng = parseInt($('.page-numbers .numbering.bold').text());
	 if(nn == 'next'){
		nn = nng+1; 
	 }if(nn == 'prev'){
		 nn = nng-1; 
	 } 
    //get all child elements with class front-pro 
    //of element with class .inner-content
    var childElems = $(".inner-content .front-pro");
	var totalpages = Math.ceil(childElems.length/12);
    //iterate through the elements
	var first = (nn-1)*12;
	var last = first+11;
    childElems.each(function(i, el) {
		
      //show the elements that match the criteria removing css class
      if (i >= first && i <= last) {
        $(el).removeClass('hidden');
      } else {
        //hide rest
        $(el).addClass('hidden');
      }
    });
    
	if(nn > 1){ $('.page-numbers .prev').show(); }else{ $('.page-numbers .prev').hide(); }
	if(nn < totalpages){ $('.page-numbers .next').show(); }else{ $('.page-numbers .next').hide(); }
	$('.page-numbers .numbering').removeClass('bold');
	$('.page-numbers .numbering:eq('+(nn-1)+')').addClass('bold');
  }