JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-box">
    <div class="main-box-content">
        <div class="text">
            <!-- TEXT 1 -->
            <p> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore 
                magna aliqua. Ut enim ad minim veniam, quis nostrud 
                exercitation ullamco laboris nisi ut aliquip.
            </p>
            
            <!-- TEXT 2 -->
            <p> 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore 
                magna aliqua. Ut enim ad minim veniam, quis nostrud 
                exercitation ullamco laboris nisi ut aliquip.
            </p>
            
             <!-- TEXT 3 -->
            <p>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore 
                magna aliqua. Ut enim ad minim veniam, quis nostrud 
                exercitation ullamco laboris nisi ut aliquip.
            </p>
            
            <!-- TEXT 4 -->
            <p> 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore 
                magna aliqua. Ut enim ad minim veniam, quis nostrud 
                exercitation ullamco laboris nisi ut aliquip.
            </p>
        </div>
    </div>
    <div class="arrow-up"><a href="#">Nahoru</a></div>
    <div class="arrow-down"><a href="#">Dolu</a></div>    
</div>

CSS

#main-box{
    float:left;
    width: 200px;
    min-height:300px;
    background: #eee;
    padding:20px;

}

.main-box-content{


    float:left;
    width: 180px;
    height:260px;
    background: #ccc;
    padding: 10px;
    overflow:hidden;
}
.text{
    position:relative;
}
.main-box-content p{
    margin: 10px 0 10px 0;
    padding: 10px;
    text-align:left;
    border-bottom: solid 1px #666;
}

.arrow-up, .arrow-down{
    float:left;
    margin:20px 20px 10px 0;
}

JavaScript

function anmiateClass(){
    var animated = false;
    var text = $('.text');
    var wrap = $('.main-box-content');
    var speed = 1;
    
    var limitHeight = text.height() - wrap.height();
    
    text.css('top', 0);
             
    function animation(){
        var currentTop = parseInt(text.css('top'))*1;

        if(limitHeight>=(-currentTop))
        {
            text.css('top', currentTop-1);
        }
    } 
    
    this.start = function(){
        if(!animated)
        {
            animated = setInterval(animation, speed); 
        }
    }
    
    this.stop = function(){
       if(animated) 
       { 
         clearInterval(animated);
         animated=false;
       }
    }
    
    this.setSpeed = function(s){
        speed = s;
    }
               
}

var animation = new anmiateClass();

$(".arrow-down").mousedown(function(e) {
    e.preventDefault();
    animation.start();

}).mouseup(function(){
    animation.stop();
})