JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ticker">
    <h3>Latest News</h3>
    <ul id="ticker">
        <li>Dummy data is benign information that does not contain any useful data, but serves to reserve spac...</li>
        <li>For testing, dummy data can also be used as stubs or pad to avoid software testing iss...</li>
        <li>In operational use, dummy data may be transmitted for OPSEC purposes.</li>
        <li>Dummy data must be rigorously evaluated and documented to ensure that it does no...</li>
        <li>The topic of this article may not meet Wikipedia's general notability guideline.</li>
    </ul>
</div>

CSS

.ticker {
    width: 400px;
	height: 200px;
	overflow: hidden;
	border: 1px solid #DDD;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #DDD;
	background-color:  #F5F3E5;
	text-align: left;
}

.ticker h3 {
	padding: 0 0 10px 10px;
	border-bottom: 1px solid #A7A7A7;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-style: italic;
}
ul li {
    list-style: none;
    height:50px;
    padding:7px;
    border-bottom: 1px solid #D6CFB8;
}

JavaScript

$(document).ready(function() {
           function ticker() {
    $('#ticker li:first').slideUp(function() {
        $(this).appendTo($('#ticker')).slideDown();
    });
}

var ticke= setInterval(function(){ 
    						ticker(); 
			}, 3000);
       $('#ticker li').mouseover(function() { 
          clearInterval(ticke);
      }).mouseout(function() { 
          ticke= setInterval(function(){ ticker(); }, 3000);
        });
      
        });