JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
      <ul class="sponsors">
        <li>Chicago Community Trust</li>
        <li>Chicago Instructional Technology Foundation</li>
        <li>City of Chicago</li>
        <li>Corporation for Public Broadcasting</li>
        <li>U.S. Department of Energy</li>
        <li>Ford Foundation</li>
        <li>Google</li>
        <li>Intel</li>
        <li>Knight Foundation</li>
        <li>MacArthur Foundation</li>
        <li>National Endowment for the Arts</li>
        <li>NESTA</li>
        <li>The Nominet Trust</li>
        <li>National Science Foundation</li>
        <li>Ontario Trillium Foundation</li>
        <li>Social Science Research Council</li>
        <li>Alfred P. Sloan Foundation</li>
        <li>Telefonica</li>
        <li>ZeroDivide</li>
      </ul>    
    
    
    </div>

CSS

ul.sponsors li { display: none;
     float: left;
     padding-right:10px;
     }
     
     li{
       background:cadetblue;
     }

JavaScript

var counter = 0;
var limit = 0;

function fadeInSequence(li){
    var next = $(li).next('li')!=null?function(){fadeInSequence($(li).next('li'));}:function(){};
    $(li).fadeIn(200,next);
    counter++;
    if(counter == limit){
    
        counter = 0;
    }

}
fadeInSequence($('.sponsors>li:first'));