JSFiddle - React, Tailwind, and code Playground

by Vladimir

CSS

article:nth-child(2n) {
  background: #eee;
}

JavaScript

var apps = [
	{c: 'Browser', n: 'Google Chrome'},
  {c: 'Browser', n: 'Firefox'},
  {c: 'Browser', n: 'Opera'},
  {c: 'Browser', n: 'Edge'},
  {c: 'Browser', n: 'Vivaldi'},
  {c: 'Browser', n: 'Internet Explorer'},
  {c: 'Browser', n: 'WaterFox'},
  {c: 'Messenger', n: 'Viber'},
  {c: 'Messenger', n: 'Skype'},
  {c: 'Messenger', n: 'Telegram'},
  {c: 'Messenger', n: 'Slack'},
  {c: 'Messenger', n: 'WhatsApp'}
];

var postPerPage = 2;
var cats = {};
apps.forEach(function(a) {
	if(!(a.c in cats)) {
  	cats[a.c] = {
    	slug: a.c.toLowerCase(),
      apps: []
    };
  }
  cats[a.c].apps.push(a);
});

var output = '';
for(var j in cats) {
  var pages = Math.ceil(cats[j].apps.length/postPerPage);
  for(var p = 0; p < pages; p++) {
		output += '<article><h3>'+ j + ' : '+pageLink(cats[j].slug, p)+'</h3>';
    for(var k = 0; k < postPerPage; k++) {
    	var index = postPerPage*p + k;
      if(index < cats[j].apps.length) {
      	output += '<div>' + cats[j].apps[index].n + '</div>';
      }
    }
    output += '<footer>' + pagination(cats[j].slug, p, pages) + '</footer></article>';
  }
}
document.body.innerHTML = output;

function pagination(slug, page, pages) {
	var output = '';
	for(var i = 0; i < pages; i++) {
  	if(i == p) {
    	output += '[' + (i+1)  + '] ';
    } else {
    	output += '<a href="'+pageLink(slug, i)+'"> [' + (i+1)  + ']</a> ';
    }
  }
  return output;
}
function pageLink(slug, p) {
	return slug + (p > 0 ? ('-' + (p+1)):'') + '.html';
}