JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
    <div class="test1">
       <div class="mainNavitem re"></div>
    </div> 
    <div class="test2">
      <div class="mainNavitem re"></div>   
  
    </div>
    <div class="test3">
         <div class="mainNavitem re"></div>
    </div>
</div>

CSS

#navigation {
    width: 500px;
    height: 70px;
    background-color: rgb(187, 51, 55);
}

.test1, .test2, .test3 { 
    width: 71px;
    height: 71px;
    float: left;
}

.mainNavitem {
    width: 70px;
    height: 70px; 
    float: left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgba(255, 255, 255, 0.2);
    background-color: transparent;
    margin-left: 5px;
}

.active {
    background-color: transparent;
}

JavaScript

/* ACTIVATE ACTIVE CLASS NAV */

$('.re').click(function() {
        $('.re').removeClass('active').removeAttr('style');
        $(this).addClass('active');
});



$(".test1").click(function() {
    $(".mainNavitem").stop().animate({"border-right-color":"rgba(255,255,255, 0.2)"}, 800);
    $(".active").stop().animate({"backgroundColor":"transparent"}, 800);
    $(".bg").stop().animate({"backgroundColor":"rgb(199, 55, 59)"}, 800);
   
});

$(".test2").click(function() {
    $(".mainNavitem").stop().animate({"border-right-color":"rgba(255,255,255, 0.5)"}, 800);
    $(".active").stop().animate({"backgroundColor":"transparent"}, 800);
    $(".bg").stop().animate({"backgroundColor":"rgb(199, 55, 59)"}, 800);
});

$(".test3").click(function() {
    $(".mainNavitem").stop().animate({"border-right-color":"rgba(255,255,255, 1)"}, 800);
    $(".active").stop().animate({"backgroundColor":"transparent"}, 800);
    $(".bg").stop().animate({"backgroundColor":"rgb(199, 55, 59)"}, 800);
});