JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <ul id="js-news" class="js-hidden"></ul>
    </div>
    <footer>
        <div class="container" id="newswiretxt"><span></span>
        </div>
    </footer>
</body>

CSS

footer {
    height: 75px;
    position: fixed;
    bottom: 0;
}

JavaScript

var newsWire = [];

		function loadNewswire() {
		    $.getJSON('http://api.nytimes.com/svc/news/v3/content/all/all.json', {
		        'api-key': 'XXXXXXXX'
		    },

		    function (data) {
		        console.log(data)
		        var newsWireTemp = [];
		        for (var i = 0; i < data.results.length; i++) {
		            var breakingNews = data.results[i];
		            var breakingTitle = breakingNews.title;
		            var breakingAbstract = breakingNews.abstract;
		            newsWireTemp.push(breakingTitle);
		            newsWireTemp.push(breakingAbstract);
		        }
		        newsWire = newsWireTemp;
		        console.log(newsWire.length);
		    });
		}
		loadNewswire();
		console.log(newsWire.length);

		$(document).ready(function () {
		    var items = newsWire;
		    $text = $('#newswiretxt span'),
		    delay = 10; //seconds
		    function loop(delay) {
		        $.each(items, function (i, elm) {
		            $text.delay(delay * 1E3).fadeOut();
		            $text.queue(function () {
		                $text.html(items[i]);
		                $text.dequeue();
		            });
		            $text.fadeIn();
		            $text.queue(function () {
		                if (i == items.length - 1) {
		                    loop(delay);
		                }
		                $text.dequeue();
		            });
		        });
		    }
		    loop(delay);
		});