JSFiddle - React, Tailwind, and code Playground

HTML

<a class="event-arrow event-arrow-prev">
        Anterior
    </a>
    
    <div class="event-list-container">
    <ul class="event-list">
        <li data-event-id="1" class="event-list-item event-selected">Evento 1</li>
        <li data-event-id="2" class="event-list-item">Evento 2</li>
        <li data-event-id="3" class="event-list-item">Evento 3</li>
        <li data-event-id="4" class="event-list-item">Evento 4</li>
        <li data-event-id="5" class="event-list-item">Evento 5</li>
        <li data-event-id="6" class="event-list-item">Evento 6</li>
        <li data-event-id="7" class="event-list-item">Evento 7</li>
        <li data-event-id="8" class="event-list-item">Evento 8</li>
    </ul>
    </div>
    
    <a class="event-arrow event-arrow-next">
        PrĂłximo
    </a>
    
    <div class="event-container">
        <div class="event event-current" data-event-id="1">
            <div class="event-title">
                Evento 1
            </div>
            <div class="event-description">
                Blabla bla bla
            </div>
        </div>
        
        <div class="event" data-event-id="2">
            <div class="event-title">
                Evento 2
            </div>
            <div class="event-description">
                Bleble ble
            </div>
        </div>
        
        <div class="event" data-event-id="3">
            <div class="event-title">
                Evento 3
            </div>
            <div class="event-description">
                Bli bli bli
            </div>
        </div>
        
        <div class="event" data-event-id="4">
            <div class="event-title">
                Evento 4
            </div>
            <div class="event-description">
                Blobblo blo
            </div>
        </div>
        
        <div class="event" data-event-id="5">
            <div class="event-title">
                Evento 5
            </div>
            <div class="event-description">
    ...

CSS

.event {
        width: 200px;
        height: 100px;
        background-color: gray;
        margin: 5px;
    }
    
    .event-list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 800px;
        margin-left: 0;
    }

    .event-list-container {
        width: 210px;
        overflow: hidden;
        background-color: yellow;
        height: 20px;
    }
    
    .event-list-item {
        margin-left: 5px;
        margin-right: 5px;
        cursor: pointer;
        width: 60px;
        float: left;
        display: block;
        background-color: gray;
        text-align: center;
    }
    
    .event-arrow {
        color: blue;
        cursor: pointer;
    }
    
    .event-selected {
        text-decoration: underline;
        color: green;
    }
    
    .event {
        display: none; 
    }
    
    .event-current {
        display: block;
    }
    
    .event-title {
        font-size: 26px;
        font-weight: strong;
        margin-bottom: 5px;
        background-color: black;
        color: gray;
    }

JavaScript

function showCurrentEvent(eventId) {
        $('.event-current').removeClass('event-current');
        $('.event[data-event-id=' + eventId + ']').addClass('event-current');
        
    }
    
    $(function() {
        $('.event-arrow-prev').on('click', function() {
            $('.event-list').css('margin-left', function (index, curValue) {
                var cur = parseInt(curValue, 10) + 70;
                
                if (cur < 0) {
                    return cur + 'px';
                }
                else {
                    return '0px';
                }
            });
            
            return false;
        });
        
        $('.event-arrow-next').on('click', function() {
            $('.event-list').css('margin-left', function (index, curValue) {
                var cur = parseInt(curValue, 10) - 70;
                
                if (cur >= -70*5) {
                    return cur + 'px';
                }
                else {
                    return (-70*5) + 'px';
                }
            });
                         
            return false;
        });
        
        $('.event-list-item').on('click', function() {
            var currentEvent = $('.event-selected');
            currentEvent.removeClass('event-selected');
            
            var newEventId = $(this).data('event-id');
            
            $('.event-list-item[data-event-id=' + newEventId + ']').addClass('event-selected');
            
            showCurrentEvent(newEventId);
            
            return false;
        });
    });