JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="topboxesmenu">
                        <li>
                              <a class="employers"><p>Employers</p></a> 
                        </li>
                        <li>
                              <a class="he"><p>Higher Education</p></a>
                        </li>
                        <li>
                                <a class="adults"><p>Adults</p></a>
                        </li>
                           <li>
                               <a class="schoolleavers"><p>School Leavers</p></a>
                        </li>
                    </ul>

CSS

ul#topboxesmenu {list-style:none;  position:relative; margin-bottom: 0;}
ul#topboxesmenu ul {margin-bottom: 0; margin-left: 0;}
ul#topboxesmenu li {margin-bottom: 0; margin-left: 0;margin-top: -31px; }
ul#topboxesmenu li p {font-size: 12px; line-height: 20px; margin-bottom: 0; margin-left: 0; text-transform: uppercase;  color:#fff; font-weight: 400; }
ul#topboxesmenu li a:hover {text-decoration: none!important;}
ul#topboxesmenu li a {cursor:pointer; text-align: center;  float:left;  width: 125px; margin-right: 0px;    padding-top:102px; background:#ff0000; margin-right:10px;       padding-bottom:22px;
transition:all 0.2s ease-in-out; 
-o-transition:all .2s ease-in-out; 
-moz-transition:all .2s ease-in-out; 
-webkit-transition:all .2s ease-in-out;    
-ms-transition:all .2s ease-in-out; 
}
ul#topboxesmenu li a.current{
  background:black
}

JavaScript

$(function(){
    loopIt();
});

function loopIt(){    
    $('#topboxesmenu li a').each(function(i){
      var t=$(this);
      setTimeout(function(){
        t.addClass('current');
          setTimeout(function(){
            t.removeClass('current');
              if(i==$('#topboxesmenu li a').length-1) loopIt();;
          }, 1000);
      }, 1100*i);
    });
}