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>
           
            !-- 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,...

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;
    float:left;
    background: red;
}
.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

var speed=3;
    /* DOWN EVENT */
    $(".arrow-down").mousedown(function(e)
    {
        e.preventDefault();
        var max = $(".main-box-content").height() - $(".text").height();
        var top = $(".text").css("top");
        var moveTime= Math.abs(max-parseInt(top))*speed;
        $('.text').stop().animate({
            top: max
        }, moveTime,"linear");
    }).mouseup(function()
    {
         $('.text').stop();   
    });
 
    /* UP EVENT */
    $(".arrow-up").mousedown(function(e) {
        e.preventDefault();
        var moveTime=Math.abs(parseInt($(".text").css("top")))*speed;
        $('.text').stop().animate({
            top: 0
        }, moveTime,"linear");
    
    }).mouseup(function(){
         $('.text').stop();   
    })