JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>  
   <div class="box-new">
    <span class="box-title2">Новости</span> <span class="box-title1">Дня</span>
    <div class="box-content">
    <div id="box-scroldiv">
   <!-- функция вывода постов для WordPress'a   -->
   <ul>
    <?php $recent = new WP_Query("cat=8&showposts=5"); while($recent->have_posts()) : $recent->the_post();?>
    <li>
        <b><?php the_time('Y-m-d')?></b>
     <a href="<?php the_permalink() ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40,"...") ?></a>
    </li>
    <?php endwhile; ?>
    </ul>
                
   <!-- HTML разметка не для WordPress'a
        <ul>
        <li><b>2015-12-33</b><a href="#">текст#1</a></li>
        <li><b>2015-12-33</b><a href="#">текст#2</a></li>
        </ul>
        -->
    </div>
    <div class="box-arrow">
        <span id="btn2">◄</span>
        <span id="btn1">►</span>
    </div>
    </div>
</div>
<div class="clear"></div>

CSS

.box-new {
    margin-bottom: 15px;
}
.box-title1 {
    color: #666666;
    font-size: 18px;
    font-weight: normal;
    line-height: 22px;
    padding-left: 8px;
    text-decoration: none;
    text-transform: uppercase;
}
.box-title2 {
    color: #e11c36;
    float: left;
    font-family: Arial;
    font-size: 18px;
    font-weight: normal;
    line-height: 23px;
    margin-bottom: 5px;
    text-decoration: none;
    text-transform: uppercase;
}
.box-content {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    clear: both;
    height: 50px;
    width: 100%;
}
#box-scroldiv {
    float: left;
    height: 34px;
    margin: 10px 0 0 20px;
    overflow: hidden;
    width: 500px;
}
#box-scroldiv ul li {
    height: 34px;
    overflow: hidden;
        margin: 0;
}
#box-scroldiv ul {
        margin: 0;
        padding:0;
}
#box-scroldiv ul li a {
    color: #e11c36;
    font-size: 14px;
    font-weight: normal;
    line-height: 33px;
    text-decoration: none;
}
#box-scroldiv ul li a:hover{
        text-decoration: underline;;
}
#box-scroldiv b{
        margin-right: 10px;
        height:34px;
        font-size: 14px;
        line-height: 33px;
        color: #666;
        text-decoration: none;
}
.box-arrow {
    float: right;
    padding: 0 10px;
}
#btn1 {
    color: #888;
    font-size: 18px;
    line-height: 50px;
}
#btn2 {
    color: #888;
    font-size: 18px;
    line-height: 50px;
}
/*стили для очищающего блока (если понадобится)
.clear{
        display:block;
        width:100%;
        height:0px;
        clear:both;
        overflow:hidden;
        visibility: hidden;
        font:400 0px/0px Arial;
}
*/

JavaScript

<script type="text/javascript">
(function($){
        $.fn.extend({
         Scroll:function(opt,callback){
                if(!opt) var opt={};
                var _btnUp = $("#"+ opt.up);//кнопка вверх
                var _btnDown = $("#"+ opt.down);//кнопка вниз
                var timerID;
                var _this=this.eq(0).find("ul:first");
                var     lineH=_this.find("li:first").height(), //получаем высоту строки
                                line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
                                                        
                speed=opt.speed?parseInt(opt.speed,10):800;
                timer=opt.timer?parseInt(opt.timer,10):80000;
                        if(line==0) line=1;
                        var upHeight=0-line*lineH;
                        //функция прокрутки
                        var scrollUp=function(){
                                _btnUp.unbind("click",scrollUp);
                                _this.animate({
                                        marginTop:upHeight
                                                },speed,function(){
                                                        for(i=1;i<=line;i++){
                                                        _this.find("li:first").appendTo(_this);
                                                        }
                                                        _this.css({marginTop:0});
                                                        _btnUp.bind("click",scrollUp);
                                                });
        
                                        }
                        //функция вниз
                        var scrollDown=function(){
                                _btnDown.unbind("click",scrollDown);
                                for(i=1;i<=line;i++){
                                        _this.find("li:last").show().prependTo(_this);
                                        }
    ...