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.active a {
    background:#00ff00 !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

jQuery(document).ready(function() {
    window.setInterval(function() {
            var oldBox = jQuery('#topboxesmenu li.active');
            if(oldBox.length == 0 || oldBox.next().length == 0)
            {
                    oldBox.removeClass('active');
                jQuery('#topboxesmenu li:first-child').addClass('active');
            }
            else
                oldBox.removeClass('active').next().addClass('active');
    },2000);
});