JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mural">
    <div class="texto">
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
    </div>
    <div class="botoes">
        <div class="up"><a href="">UP</a>

        </div>
        <div class="down"><a href="">DOWN</a>

        </div>
    </div>
</div>

CSS

.mural {
    width:100%;
    background:black;
}
.texto {
    margin:20px auto;
    width:50%;
    height:100px;
    background:#8f528f;
    padding:20px;
    color:white;
    overflow-y:scroll;
}
.botoes {
    float:right;
    display:inline-flex;
    color:black;
    background:white
}
.up {
    margin-right:10px;
}

JavaScript

var frame = $('.texto');
$('.botoes a').on('click', function (e) {
    e.preventDefault();
    fazerScroll($(this).parent().hasClass('up'));
});

function fazerScroll(direcao) {
    var scrollAtual = frame.scrollTop();
    var novaPosicao = direcao ? scrollAtual - 200 : scrollAtual + 200;
    frame.animate({
        scrollTop: novaPosicao
    }, 1000);
}