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; 

 
 }

JavaScript

el = $('#topboxesmenu li:first-child');
setInterval(function() {
    el = window.el;
    el.siblings().children('a').css('background','#ff0000');
    el.children('a').css('background-color', 'blue');
    el = el.next().length ? 
         el.next() : el.parent().children('li:first-child');
}, 1000);