JSFiddle - React, Tailwind, and code Playground

HTML

<div class="news_ticker">
    <h3>Latest News</h3>
    <ul id="news_ticker">
        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </li>
        <li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </li>
        <li>Contrary to popular belief, Lorem Ipsum is not simply random text.  </li>
        <li>There are many variations of passages of Lorem Ipsum available </li>
        <li>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </li>
    </ul>
</div>

CSS

.news_ticker {
		  background-color: #fba41a;
		    border: 1px solid #000;
		    border-radius: 5px;
		    box-shadow: 0 0 5px #000;
		    height: 100%;
		    overflow: hidden;
		    text-align: left;
		    width: 100%;
		}
		.news_ticker h3 {
		padding: 0 0 10px 10px;
		border-bottom: 1px solid #000;
		}
		ul {
		list-style: none;
		padding: 0;
		margin: 0;
		font-style: italic;
		}
		ul li {
		list-style: none;
		height:50px;
		padding:7px;
		border-bottom: 1px solid #000;
		}

JavaScript

function news_ticker() {
    $('#news_ticker li:first').slideUp(function() {
        $(this).appendTo($('#news_ticker')).slideDown();
    });
}
setInterval(news_ticker, 3000);