JSFiddle - React, Tailwind, and code Playground

CSS

span {
  display: inline-block;
  font-size: 16px;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  background: red;
  color: white;
}

.big {
  font-size: 32px;
  padding: 10px;
}

.rotated {
  transform: rotate(-30deg);
}

JavaScript

document.body.innerHTML = Array
  .from({ length: 100 }, (n, i) => `<span>${i + 1}</span>`)
  .join('');


const N = 8;


$('span').not(i => i % N).addClass('red');

document.querySelectorAll('span').forEach((n, i) => {
  n.classList.toggle('big', !(i % N));
});

const elems = document.getElementsByTagName('span');
for (let i = 0; i < elems.length; i += N) {
  elems[i].classList.add('rotated');
}