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(){
$('#topboxesmenu li a').each(function(i){
  var t=$(this);
  setTimeout(function(){
      t.addClass('current');
      setTimeout(function(){
          t.removeClass('current');
      }, 1000);
  }, 1100*i);
});
});