JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mini-carousel">
  <ul id="bigWinners">
    <li>
      <div>News Link 1</div>
      <div>Description 1</div>
    </li>
    <li>
      <div>News Link 2</div>
      <div>Description 2</div>
    </li>
    <li>
      <div>News Link 3</div>
      <div>Description 3</div>
    </li>
  </ul>
</div>

CSS

.mini-carousel {
  height:40px;
  overflow:hidden;
  width:150px;
}
.mini-carousel ul {
  width:450px;
}
.mini-carousel li {
  display:block;
}

JavaScript

function tick() {
  $('#bigWinners li:first').animate({
    opacity': 0
  }, 200, function () {
    $(this).appendTo($('#bigWinners')).animate({'opacity' : 1}, 500);
  });
}
var timer = setInterval(tick, 1000);

$('#bigWinners').on({
  mouseenter: function(){
    clearInterval(timer);
  },
  mouseleave: function(){
    timer = setInterval(tick, 1000);
  }
});