JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-itinerary__buttons-wrapper" id="myDIV">
          <button  class="content-itinerary__buttons description-text active ">Day 2</button>
          <button class="content-itinerary__buttons description-text">Day 3</button>
          <button class="content-itinerary__buttons description-text ">Day 4</button>
          <button class="content-itinerary__buttons description-text">Day 5</button>
          <button class="content-itinerary__buttons description-text">Day 6</button>
          <button class="content-itinerary__buttons description-text">Day 7</button>
          <button class="content-itinerary__buttons description-text">Day 8</button>
          <button class="content-itinerary__buttons description-text">Day 9</button>
          <button class="content-itinerary__buttons description-text">Day 10</button>
        </div>

CSS

.content-itinerary__buttons-wrapper {
    display: flex;
    margin-top: 20px;
}

.content-itinerary__buttons {
    flex-grow: 1;
    padding: 21px 15px 15px 15px;
    box-sizing: border-box;
    border: 1px solid #D7D7D7;
    outline: none;

    &:not(:last-child) {
        border-right: 0;
    }

}

.active, .btn:hover {
  background-color: red;
  color: white;
}

JavaScript

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("content-itinerary__buttons");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}