JSFiddle - React, Tailwind, and code Playground

HTML

<div class="apotopscrollpanel" title="Вверх">
    <div class="aposcrollarrow0"></div>
    <div class="aposcrollarrow1"></div>
    <div class="aposcrollarrow2"></div>
    <div class="aposcrollarrow3"></div>
    <div class="aposcrollarrow4"></div>
</div>

<script>
    document.onscroll = function() {
    if($('head').offset().top > 100) {
        $('.apotopscrollpanel').fadeIn(300);
    } else {
        $('.apotopscrollpanel').fadeOut(100);
    };
};

$(function() {
    $('.apotopscrollpanel').click(function() {
        $('html,body').animate({scrollTop: 0}, 300);
    });    
});
</script>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div></div>

CSS

body {
    background: #ff5555;
}
.apotopscrollpanel div {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.apotopscrollpanel:hover .aposcrollarrow0 {
    margin-top:45px;
}
.apotopscrollpanel:hover .aposcrollarrow1 {
    margin-top:40px;
}
.apotopscrollpanel:hover .aposcrollarrow2 {
    margin-top:25px;
}
.apotopscrollpanel:hover .aposcrollarrow3 {
    margin-top:15px;
}
.apotopscrollpanel:hover .aposcrollarrow4 {
    margin-top:7px;
}
.apotopscrollpanel {
    position: fixed;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 50px;
    bottom: 0px;
    left: 0px;
    z-index: 50;
    cursor:pointer;
    display:none;
}
.aposcrollarrow0 {
    width: 70%;
    margin-left: -40%;
    border-style: solid;
    border-width: 0 40px 50px 40px;
    border-color: transparent transparent #949494 transparent;
    position: absolute;
    left: 50%;
    margin-top:40px;
    z-index: 55;
}
.aposcrollarrow1 {
    width: 54%;
    margin-left: -32%;
    border-style: solid;
    border-width: 0 40px 50px 40px;
    border-color: transparent transparent #D1D1D1 transparent;
    position: absolute;
    left: 50%;
    margin-top:30px;
    z-index: 55;
}
.aposcrollarrow2 {
    width: 34%;
    margin-left: -22%;
    border-style: solid;
    border-width: 0 40px 50px 40px;
    border-color: transparent transparent #E0E0E0 transparent;
    position: absolute;
    left: 50%;
    margin-top:20px;
    z-index: 55;
}
.aposcrollarrow3 {
    width: 16%;
    margin-left: -13%;
    border-style: solid;
    border-width: 0 40px 50px 40px;
    border-color: transparent transparent #F3F3F3 transparent;
    position: absolute;
    left: 50%;
    margin-top:10px;
    z-index: 55;
}
.aposcrollarrow4 {
    width: 0;
    margin-left: -5%;
    border-style: solid;
    border-width: 0 40px 50px 40px;
    border-color: transparent transparent #FFFFFF transparent;
    position: absolute;
   ...