JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timeline-dates">

  <div class="active">
    <span>Jan</span>
    <b>2000</b>
  </div>
  <div>
    <span>Feb</span>
    <b>2000</b>
  </div>
  <div>
    <span>Mar</span>
    <b>2000</b>
  </div>

</div>

<div class="nav">
  <p id="timeline-prev">
    PREV
  </p>
  <p id="timeline-next">
    NEXT
  </p>
</div>

CSS

.timeline-dates {
  display:flex;
  border-bottom:1px solid gray;
}
.timeline-dates > div {
  position:relative;
  padding:25px;
  margin-right:30px;
}
b, span {
  display:block;
  transition:all 0.3s ease-in-out;
  color:black;
}
span {
  font-size:16px;
}
b {
  font-size:24px;
}

.timeline-dates > div::after {
  content: "";
  position: absolute;
  transition: all 0.3s ease-in-out;
  bottom: 0;
  left: unset;
  right: 0;
  height: 3px;
  width: 0%;
  background: red;
}

/* Active */
.timeline-dates > div.active b, .timeline-dates > div.active span {
  color:red
}
.timeline-dates > div.active::after {
  width: 100%;
  right: unset;
  left: 0;
}

JavaScript

$('#timeline-next').click(function() {
    $('.timeline-dates div.active').removeClass('active').next('div').addClass('active');
});

$('#timeline-prev').click(function() {
    $('.timeline-dates div.active').removeClass('active').prev('div').addClass('active');
});