JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js"></script>
<ul id="js-news" class="js-hidden">
    <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
</ul>

CSS

/* Ticker Styling */
.ticker-wrapper.has-js {
	margin: 20px 0px 20px 0px;
	padding: 0px 20px;
	width: 780px;
	height: 32px;
	display: block;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background-color: #f8f0db;
	font-size: 0.75em;
}
.ticker {
	width: 710px;
	height: 23px;
	display: block;
	position: relative;
	overflow: hidden;
	background-color: #f8f0db;
}
.ticker-title {
	padding-top: 9px;
	color: #990000;
	font-weight: bold;
	background-color: #f8f0db;
	text-transform: uppercase;
}
.ticker-content {
	margin: 0px;
	padding-top: 9px;
	position: absolute;
	color: #1F527B;
	font-weight: bold;
	background-color: #f8f0db;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1.2em;
}
.ticker-content:focus {
	none;
}
.ticker-content a {
	text-decoration: none;	
	color: #1F527B;
}
.ticker-content a:hover {
	text-decoration: underline;	
	color: #0D3059;
}
.ticker-swipe {
	padding-top: 9px;
	position: absolute;
	top: 0px;
	background-color: #f8f0db;
	display: block;
	width: 800px;
	height: 23px; 
}
.ticker-swipe span {
	margin-left: 1px;
	background-color: #f8f0db;
	border-bottom: 1px solid #1F527B;
	height: 12px;
	width: 7px;
	display: block;
}
.ticker-controls {
	padding: 8px 0px 0px 0px;
	list-style-type: none;
	float: left;
}
.ticker-controls li {
	padding: 0px;
	margin-left: 5px;
	float: left;
	cursor: pointer;
	height: 16px;
	width: 16px;
	display: block;
}
.ticker-controls li.jnt-play-pause {
	background-image: url('../images/controls.png');
	background-position: 32px 16px;
}
.ticker-controls li.jnt-play-pause.over {
	background-position: 32px 32px;
}
.ticker-controls li.jnt-play-pause.down {
	background-position: 32px 0px;
}
.ticker-controls li.jnt-play-pause.paused {
	background-image: url('../images/controls.png');	
	background-position: 48px 16px;
}
.ticker-controls li.jnt-play-pause.paused.over {
	background-position: 48px 32px;
}
.ticker-controls li.jnt-play-pause.paused.down {
	background-position: 48px...

JavaScript

$(function () {
        $('#js-news').ticker({
            speed: 0.10,
            htmlFeed: false,
            fadeInSpeed: 600,
            titleText: 'Latest News'
        });
    });