JSFiddle - React, Tailwind, and code Playground

by Dave Hope

HTML

<h2>Latest News Feed</h2>

	<div class="ticker grad-blue shadow">
		<ul id="ticker">
			<li>By now you’ll have heard we’re launching a new system. If you haven’t heard, speak to your manager. You can also find out more <a href="XXXXX" target="_blank">here</a>.</li>
			<li>Check out our FAQs if you want to know more, and if you have a query that hasn’t been asked before <a href="mailto:[email protected]?subject=HR Central">contact us</a>.</li>
			<li>Did you know that HR dealt with over <b>540</b> admin tasks last month?<br><br>This included 90 salary changes, 34 changes to people’s hours and 82 team moves.<br><br>Our new system will help reduce admin and save us time.</li>
		</ul>
	</div>

CSS

/* IE 8 specific CSS */

.grad-blue {
	background-color: #009fda;
}

/* IE 8 specific CSS */

.grad-blue {
	background: -webkit-linear-gradient(#009fda, #006F99);
	background: -o-linear-gradient(#009fda, #006F99);
	background: -moz-linear-gradient(#009fda, #006F99);
	background: linear-gradient(#009fda, #006F99);
}

.ticker {
	font-family: foco;
	width: 600px;
	height: 130px;
	overflow: hidden;
	border: none;
	text-align: left;
	/*background-color: #009fda;*/
	color: #fff;
	margin-bottom: 20px;
}

ul#ticker {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul#ticker li {
    list-style: none;
	font-size: 18px;
	/*line-height: 26px;*/
    height: 115px;
    padding: 7px;
    /*border-bottom: 1px solid #D6CFB8;*/
}

ul#ticker li:hover {
    
}

ul#ticker a {
	font-family: foco;
	color: #fff;
	border-bottom: 1px #fff dotted;
    text-decoration: none;
}

ul#ticker a:hover {
	text-decoration: none;
}

JavaScript

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

var timer = setInterval(ticker, 3000);

$('#ticker').on({
  mouseenter: function(){
    clearInterval(timer);
  },
  mouseleave: function(){
    timer = setInterval(ticker, 3000);
  }
});