JSFiddle - React, Tailwind, and code Playground

HTML

<div id="events-container">
    <div id="events-detail">
        <div class="container">
            <div id="event-1">Event 1</div>
            <div id="event-2">Event 2</div>
            <div id="event-3">Event 3</div>
            <div id="event-4">Event 4</div>
            <div id="event-5">Event 5</div>
            <div id="event-6">Event 6</div>
            <div id="event-7">Event 7</div>
            <div id="event-8" class="current">Event 8</div>
            <div id="event-9">Event 9</div>
            <div id="event-10">Event 10</div>
            <div id="event-11">Event 11</div>
            <div id="event-12">Event 12</div>
            <div id="event-13">Event 13</div>
            <div id="event-14">Event 14</div>
            <div id="event-15">Event 15</div>
            <div id="event-16">Event 16</div>
            <div id="event-17">Event 17</div>
            <div id="event-18">Event 18</div>
            <div id="event-19" class="current">Event 19</div>
            <div id="event-20">Event 20</div>
            <div id="event-21">Event 21</div>
            <div id="event-22">Event 22</div>
        </div>
        <div class="nav"> <span class="up">UP</span>
 <span class="down">DOWN</span>

        </div>
    </div>
    <div id="events-overview">
        <div class="container">
            <div>January <a href="#event-1">Event 1</a>
 <a href="#event-2">Event 2</a>
 <a href="#event-3">Event 3</a>

            </div>
            <div>February <a href="#event-4">Event 4</a>
 <a href="#event-5">Event 5</a>
 <a href="#event-6">Event 6</a>

            </div>
            <div>March <a href="#event-7">Event 7</a>

            </div>
            <div class="current">April <a href="#event-8">Event 8</a>
 <a href="#event-9">Event 9</a>
 <a href="#event-10">Event 10</a>

            </div>
            <div>May <a href="#event-11">Event 11</a>
 <a href="#event-12">Event 12</a>
 <a href="#event-13">Event 13</a>

            </div>
            <div>June <a...

CSS

#events-container .container {
    height: 400px;
    overflow: hidden;
}
#events-overview {
    background-color:#999999;
    padding:20px;
    width: 180px;
    float: left;
}
#events-overview .container div {
    background-color:#FC6;
    width: 180px;
    height: 90px;
    margin: 10px 0;
}
#events-detail {
    background-color:#CCCCCC;
    padding:20px;
    width: 200px;
    float:left;
}
#events-detail .container div {
    width: 200px;
    background-color: #9CC;
    height: 90px;
    margin: 10px 0 10px 0;
}

JavaScript

var detailContainer = $('#events-detail .container'),
      overviewContainer = $('#events-overview .container');

  function animateContainer(container, scrollTo, speed) {
      container.animate({
          scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
      }, speed);
  };

  function setCurrent() {
      var parent = $(this.parentElement).addClass("current");
      var scrollTo = $(this.hash).addClass("current");
      overviewContainer.children("div").not(parent).removeClass("current");
      detailContainer.children("div").not(scrollTo).removeClass("current");
      animateContainer(detailContainer, scrollTo, 500);
  };

  function navDown(e) {
      var container = $(this.parentElement.previousElementSibling);
      var current = container.children(".current");
      var button = $(e.target);
      if (current[0].nextElementSibling) {
          var next = $(current[0].nextElementSibling).addClass("current");
          container.children("div").not(next).removeClass("current");
          container.animate({
              scrollTop: current[0].nextElementSibling.offsetTop - current.offset().top
          }, 200);
      }
  };

  function navUp(e) {
      var container = $(this.parentElement.previousElementSibling); // .container
      var current = container.children(".current");
      var button = $(e.target);
      if (current[0].previousElementSibling) {
          var prev = $(current[0].previousElementSibling).addClass("current");
          container.children("div").not(prev).removeClass("current");
          container.animate({
              scrollTop: current[0].previousElementSibling.offsetTop - current.offset().top
          }, 200);
      }
  };

    // bind event handlers
  $("#events-overview a").on("click", setCurrent);

  $('.nav .down').on('click', navDown);
  $('.nav .up').on('click', navUp);