JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://powerup.ir/projects/smarticker/include/demo.js"></script>
<div class="smarticker1 smarticker no-category no-subcategory theme1 box size1 c1 s-ltr shadow googlefont"><div class="sec1-2 tickertitle">Headlines</div><div class="smarticker-news newsholder sec10">
					<ul id="newsholder" class="newsholder">
						<li class="activeRollerItem"><a href="#">News Title 1</a></li>
					</ul>
				</div><div class="smart-controller"><span class="prev-news">Previous</span><span class="pause-news">Pause</span><span class="next-news">Next</span></div></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 700);
    .smarticker {
    width: 100%;
    background: #fff;
    margin: 0 auto;
    direction: ltr;
    position: relative;
}
.box {
    min-height: 30px;
    background: #fff;
    overflow: auto;
}
.border {
    border: 1px solid #ccc;
}
.rounded {
    border-radius: 20px;
}
.shadow {
    box-shadow: 0 0 5px #999;
}
.size1 {
    height: 30px;
    overflow: hidden;
}
.smarticker .sec1, .smarticker .sec1-2, .smarticker .sec2, .smarticker .sec3, .smarticker .sec4, .smarticker .sec5, .smarticker .sec6, .smarticker .sec7 {
    float: left;
}
.smarticker .sec1 {
    min-width: 10%}
.smarticker .sec1-2 {
    min-width: 15%}
.smarticker .sec2 {
    min-width: 20%}
.smarticker .sec3 {
    min-width: 33.333%}
.smarticker .sec4 {
    min-width: 25%}
.smarticker .sec5 {
    min-width: 50%}
.smarticker .sec6 {
    min-width: 60%}
.smarticker .sec7 {
    max-width: 70%}
.s-rtl.smarticker .newsholder, .smarticker .newsholder {
    float: none;
    width: auto;
}
.smarticker ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.smarticker .smarticker-category, .smarticker .smarticker-cats, .smarticker .smarticker-news, .smarticker-cats .catlist {
    height: 100%;
    overflow: hidden;
}
.smarticker .smarticker-category, .smarticker .smarticker-cats {
    text-align: center;
}
.smarticker li {
    height: 30px;
    line-height: 28px;
}
.smarticker a {
    text-decoration: none;
}
.smarticker .smarticker-news {
    text-align: left;
    position: relative;
}
.smarticker .smarticker-news ul {
    margin-left: 15px;
    display: none;
}
.smarticker .smarticker-news ul li {
    position: absolute;
    display: none;
    height: 100%;
    top: 0;
    left: auto;
    right: auto;
    white-space: nowrap;
}
.smarticker .smarticker-news ul li a {
    white-space: nowrap;
}
.smarticker-category a {
    font-size: 16px;
    padding: 0 5px;
}
.cover {
    width: 100%;
    height: 100%;
    position:...

JavaScript

$('.smarticker1').smarticker({
		controllerType: 1
	});
	$('.smarticker2').smarticker({
		theme: 2,
		title: 'News Reader Title Section',
		speed: 2000,
		pausetime: 4000,
		shuffle:true
	});
	$('.smarticker3').smarticker({
		theme: 4,
		speed: 1500,
		pausetime: 3600,
		title: 'Latest News',
		rounded: true,
		animation: 'typing'
	});
	$('.smarticker4').smarticker({
		controllerType: 2,
		theme: 2,
		rounded: true,
		animation: 'fade',
		pausetime:1200,
		speed: 1500,
		direction: 'rtl',
		rssFeed: 'http://www.mehrnews.com/rss,http://ilna.ir/news/rss.cfm?id=4&subid=24,http://irna.ir//fa/rss.aspx?kind=45,http://www.farsnews.com/rss.php?srv=4,http://www.varzesh3.com/rss/',
		rssCats: 'آخرین اخبار,اقتصادی,موسیقی,ورزشی,عمومی',
		rssColors: '0d8800,cd2122,9b59b6,2980b9,34495e',
		rssSources: 'مهر,ایلنا,ایرنا,فارس,ورزش3',
		googleFont: false,
		googleApi:false,
		shuffle:true
	});

	$('.smarticker5').smarticker({
		theme:'2',
		shuffle:true,
		imagesPath:'images',
		rssFeed:'http://codecanyon.net/feeds/new-javascript-items.atom,http://codecanyon.net/feeds/new-wordpress-items.atom,http://graphicriver.net/feeds/new-web-elements-items.atom,http://graphicriver.net/feeds/new-graphics-items.atom,http://activeden.net/feeds/new-flash-items.atom,http://3docean.net/feeds/new-3d-models-items.atom',
		rssCats:'codecanyon.png,themeforest.png,graphicriver.png,graphicriver.png,activeden.png,3docean.png',
		rssSources:'envato.png,envato.png,envato.png,envato.png,envato.png,envato.png',
		rssColors:'2980b9,8e44ad,27ae60,27ae60,c0392b,16a085'
	});

	$('.smarticker6').smarticker({
		theme: 2,
		animation: 'typing',
		speed: 2000,
		pausetime: 5000,
		rounded: true,	
		catcolor: false,
		imagesPath:'images/'
	});
	$('.smarticker7').smarticker({
		controllerType: 2,
		theme: 3,
		animation: 'slide',
		speed: 1000,
		progressbar: true
	});

	$('.smarticker8').smarticker({
		theme: 4,
		controllerType: 1,
		animation: 'slide',
		speed: 1000,
		rounded: true,
		pausetime: 3000,
		rssFeed:...