JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<pre id="output"></pre>

<ul id="pages">

</ul>

CSS

li {
  display: inline-block;
  width: 35px;
  border: 1px solid black;  
  text-align: center;
  cursor: pointer;
}

JavaScript

(function($d, $, $j, each, $conf, $model) {

  var dom = (function(rows, out) {  
    for (var i = 1; i <= rows.n; i++) {            
    	var li = $d.createElement("li");
      li.textContent = i;      
      out.appendChild(li);
    }
    if (rows.a) {    
    	rows.a.textContent = "...";
      rows.l.textContent = rows.t;
      out.appendChild(rows.a);
      out.appendChild(rows.l);
    }
    
  })($model.length > $conf.rpp ? {t: $model.length, n: $conf.rpp, a: $d.createElement("li"), l: $d.createElement("li")} : {n: $model.length}, $("#pages")[0]);
  

  each($("li"), function(node) {  
    node.addEventListener("click", nav, false);    
  })
    
  function nav(e) {    
  	$out.textContent = this.textContent; 
  }
     

})(
document,
function(el) {
	return document.querySelectorAll(el);  
},
function(json) {
	return JSON.stringify(json, null, 2);
},
function(nodes, cb) {	
	Array.prototype.slice.call(nodes).forEach(cb);
},
{
	rpp: 3
},
[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "eum et est occaecati",
    "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem...