JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arrow-left">&laquo;</div>
<div id="years">
    <div id="scroll"></div>
</div>
<div class="arrow-right">&raquo;</div>

CSS

.arrow-left, .arrow-right {
    display: inline-block;
    cursor: pointer;
    float: left;
    z-index: 100;
}
#years{
    width: 200px;
    overflow: hidden;
    margin: 0 0 0 7px;
    display: inline-block;
    height: 20px;
    box-shadow: inset 0 0 10 #000;
    float: left;
}
#years #scroll {
    position: relative;
    width: 2000px;
}
.month {
    display: inline-block;
    width: 40px;
}

JavaScript

totalYears = 10;
        counterClick = 0;

        startDate = new Date(new Date().getFullYear() - (totalYears / 2), 0, 1);
        endDate = new Date(new Date().getFullYear() + (totalYears / 2), 0, 1);

        append = '';
        
        for(i = (totalYears / 2); i >= 0; --i){
            year = new Date(new Date().getFullYear() + i, 0, 1).getFullYear();
            append += '<div class="month '+year+'">'+year+'</div>';
        }

        for(i = 1; i <= (totalYears / 2); ++i){
            year = new Date(new Date().getFullYear() - i, 0, 1).getFullYear();
            append += '<div class="month '+year+'">'+year+'</div>';
        }

        $('#years #scroll').html(append);

        $('.arrow-left').click(function() {
            if(counterClick <= 0) {
               return;
            }
            counterClick--;
            $('#scroll').animate({left: '+=40px'});
        });
        $('.arrow-right').click(function() {
            if(counterClick > ($('#scroll div').size() / 2)) {
               return;
            }
            counterClick++;
            $('#scroll').animate({left: '-=40px'});
        });