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;
}

JavaScript

$('document').ready(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]);
    });

    
    
}
);