JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="container slider">
    <div class="row">
      <div class="col-xs-4 about" id="comment-block" style="opacity:1">
        <p id="comment-name">Юрий Корзинин, ООО «Forbo-Стройтех», г.Москва</p>
      </div>
      <div class="col-xs-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorem!</p>
      </div>          
    </div>
    <div class="row">
      <a href="#" id="Up" class="col-xs-6">Up</a>
      <a href="#" id="Down" class="col-xs-6">Down</a>
    </div>
  </div>
</section>

CSS

#comment-name {
    background:#fff;
    padding:5px;
    color:#000;
    text-align: center;
}
.slider div {
    padding:5px;
}
.slider a+a {
    text-align: right;
}
.slider {
    background:rgb(143, 29, 120);
    color:#fff;
    -webkit-transition: background .2s;    
    -moz-transition: background .2s; 
    -ms-transition: background .2s; 
    -o-transition: background .2s;
    transition: background .2s;
}

JavaScript

$(function() {
  var names = ['Oleg', 'Katavasia', 'Igor'];
  var comments = ['Oleg inside', 'Katavasia inside', 'Igor inside'];
  var colors = ['red','yellow','green'];

  quant_comments = names.length - 1;
  current_comment = 0;

  $('#Up').click(function() {
    current_comment++;
    if (current_comment > quant_comments) {
      current_comment = 0;
    }

    $('#comment-name').text(names[current_comment]);
    $('div:not(.about)>p').text(comments[current_comment]);
    $('.slider').css({'background-color': colors[current_comment]});        
  });

  $('#Down').click(function() {
    current_comment--;
    if (current_comment == -1) {
      current_comment = quant_comments;
    }
    $('#comment-name').text(names[current_comment]);
    $('.slider').css({'background-color': colors[current_comment]});          
    $('div:not(.about)>p').text(comments[current_comment]);
  });    
});