JSFiddle - React, Tailwind, and code Playground

HTML

<button id="menos">&#171 Anterior</button>

<a href="#A" class="ativo">1</a>
<a href="#B">2</a>
<a href="#C">3</a>
<a href="#D">4</a>

<button id="mais">Próximo &#187</button>

CSS

a {
    cursor: pointer;
    padding: 3px;
    text-decoration: none;
    color: #111;
}

a.ativo {
    font-weight: bolder;
    background-color: #333;
    color: #fff;
}

JavaScript

var els = document.getElementsByTagName('a')
var btns = document.getElementsByTagName('button')
var x = 0;

for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', mudarPágina);
}

function mudarPágina() {
    for (var i = 0; i < els.length; i++) { // fazer reset
        els[i].classList.remove('ativo');
    }
    var incr = this.id == 'mais' ? 1 : -1;
    x = x + incr;
    if (x < 0) x = 0;
    else if (x > els.length - 1) x = els.length - 1;
    els[x].classList.add('ativo');
}