JSFiddle - React, Tailwind, and code Playground

HTML

<div id="twitnews" style="padding-left:20px; line-height:20px; float:left;">
    <ul>
        <li>Super tweet cool story bro.
        </li>
        <li>World Hold on, this is another test
        </li>
    </ul>
</div>

CSS

ul {position:relative;}
li {position:absolute; width:500px; display:none}

JavaScript

(function($){
$.fn.twicker = function(settings) {
  var c = {time: 1300};
  $.extend(c, settings);
  var $t = $(this);
  console.log('go');
  if($('ul', $t).length == 1) {
      $tw = $t;
      $t = $('li', $t).first();
  }
  console.log($t);
  $t.delay(c.time).fadeIn(c.time, function() {
    if($t.next().length != 0) {
        $t.next().twicker();
        $t.next().fadeOut();
    } else {
        $tw.first().twicker();
        $t.first().fadeOut();
    }
    $t.fadeOut(c.time);
  });

};

})(jQuery);
$('#twitnews').twicker({time:2000});