JSFiddle - React, Tailwind, and code Playground

HTML

<content>
    <div id="content">
    ОЧЕНЬ ЗАБАВНАЯ ИСТОРИЯ ПРО ПОСТОЯЛЬЦА ОТЕЛЯ И МЫЛО 
(прочитайте до конца)
Реальная переписка администрации лондонского отеля с одним из гостей. 
Гостиница решилась опубликовать ее в газете Sunday Times, чем заслужила всеобщее уважение за самоиронию. 
<br> * <br>
Уважаемая горничная, пожалуйста, не кладите мне в ванную фирменное мыло вашего отеля. Я привез с собой свое собственное мыло марки Dial. Пожалуйста,унесите шесть неиспользованных кусочков мыла с полочки под шкафчиком и три кусочка из душевой кабины. Они мне мешают. 
Спасибо, С.Берман. 
<br> * <br>
Уважаемый номер 635, я не ваша обычная горничная. Она сегодня взяла выходной и вернется в четверг. Я забрала три мыла из душевой кабины, как выпросили. Те шесть кусочков я убрала с полочки, чтобы они вам не мешали. Их я положила на коробку с бумажными салфетками, на случай, если вы вдруг передумаете. Туда я положила еще три кусочка, так как по инструкции мы должны класть по три кусочка мыла в каждый номер ежедневно. Надеюсь, что теперь все в порядке. 
Кати, горничная. 
<br> * <br>
Уважаемая горничная, надеюсь, что вы – моя обычная горничная. Кати вам, наверное, не сообщила о моей просьбе по поводу мыла. Вчера вечером, когда я вернулся в номер, выяснилось, что вы положили три маленьких мыла Camay на полочку под шкафчиком. Я буду в вашем отеле жить 14 дней, поэтому я привез с собой свое собственное мыло марки Dial. То есть, те шесть кусочков мыла на полочке мне не потребуются. Они мне мешают, прошу вас их забрать. 
Спасибо, С.Берман. 
<br> * <br>
Уважаемый мистер Берман, менеджер отеля мистер Грин сообщил мне сегодня утром, что вы звонили ему вчера вечером и выражали недовольство сервисом в своем номере. Поэтому я определила вам новую горничную. Примите мои извинения за причиненные неудобства. По всем вопросам, пожалуйста, обращайтесь прямо ко мне. Звоните 11 08 с 8:00 до 17:00. 

Спасибо. Элен, администратор.
<br> * <br>
    Уважаемая Элен, связаться с вами по телефону я не...

CSS

content {
    position: absolute;
    height: 256px;
    width: 256px;
    left: 50%;
    top: 50%;
    margin-left: -129px;
    margin-top: -129px;
    overflow: hidden; 
    border: 1px solid #ccc;
    border-radius: 32px;
}

#content {
    height: 97%;
    width: 100%;
    overflow: scroll;
    padding: 0 25px 25px 0;
    margin: 10px 0 0 10px;
}

#up, #down {
    position: absolute;
    height: 16px;
    width: 16px;
    left: 50%;
    top: 50%;
    margin-left: 128px;
    margin-top: -128px;
    background: #000;
    border-radius: 4px;
}

#down {
    margin: 128px 0 0 128px;
}

JavaScript

$('#up').click(function(){
        $('#content').scrollTo('0', 2000);
    });
    
    $('#down').toggle(function(){
        $('#content').scrollTo('25%', 1000);
    }, function(){
        $('#content').scrollTo('50%', 1000);
    }, function(){
        $('#content').scrollTo('75%', 1000);
    }, function(){
        $('#content').scrollTo('100%', 1000);
    }, function(){
        $('#content').scrollTo('0', 2000);
    });