JSFiddle - React, Tailwind, and code Playground

jNewsbar

by Jennifer Perrin

HTML

<div class="latest-news">
    	<h2>Latest News</h2>

    <ul>
        <li><a href=''>jNewsbar Plugin Release</a>  <span class="date">March 23, 2013</span>
        </li>
        <li><a href='http://codecanyon.net/item/meet-the-team-plugin/4126778' target="_blank">Get Wordpress Meet the Team Plugin</a>  <span class="date">March 19, 2013</span>
        </li>
        <li><a href='http://themeforest.net/user/phpbits#from' target="_blank">Need help on Installation?</a>  <span class="date">March 19, 2013</span>
        </li>
        <li><a href='https://twitter.com/phpbits' target="_blank">Follow plugin author</a>  <span class="comments"><a href="https://twitter.com/phpbits" target="_blank">@phpbits</a></span>
        </li>
    </ul>
</div>
<div class="latest-news2">
    	<h2>Latest News</h2>

    <ul>
        <li><a href=''>jNewsbar Plugin Release</a>  <span class="date">March 23, 2013</span>
        </li>
        <li><a href='http://codecanyon.net/item/meet-the-team-plugin/4126778' target="_blank">Get Wordpress Meet the Team Plugin</a>  <span class="date">March 19, 2013</span>
        </li>
        <li><a href='http://themeforest.net/user/phpbits#from' target="_blank">Need help on Installation?</a>  <span class="date">March 19, 2013</span>
        </li>
        <li><a href='https://twitter.com/phpbits' target="_blank">Follow plugin author</a>  <span class="comments"><a href="https://twitter.com/phpbits" target="_blank">@phpbits</a></span>
        </li>
    </ul>
</div>

CSS

/* GLOBAL */
 .jnewsbar {
    position: fixed;
    overflow: hidden;
    width: 100%;
    right: 0;
    padding:5px 0px;
    display: none;
}
.jnews-bottom {
    border-top: 1px solid;
}
.jnews-top {
    border-bottom: 1px solid;
}
.jnewsbar h2, .jnewsbar ul, .jnewsbar li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.jnewsbar > div.jnewsbar-title {
    display: inline-block;
    float: left;
    overflow: hidden;
    padding:0px 20px;
    max-width: 30%;
    text-transform: uppercase;
}
.jnewsbar ul {
    overflow: hidden;
    display: inline-block;
    float: left;
    padding:0px 25px;
    max-width: 60%;
    word-break: break-all;
}
.jnewsbar a {
    text-decoration: none;
}
.jnewsbar a:hover {
    text-decoration: underline;
}
.jnewsbar li > a {
    padding: 0 20px 0px 0px;
    text-align: right;
    text-transform: uppercase;
}
.jnewsbar li span {
    font-size: 12px;
    opacity: 0.6;
}
/*
	Controls
 */
 .jnewsbar-navigate {
    float: left;
    padding: 0px 20px;
    font-size: 18px;
    width: 35px;
}
.jnewsbar-navigate a:hover {
    text-decoration: none;
    font-size: 22px;
}
.jnews-toggle {
    position: absolute;
    float: right;
    padding:0px 15px;
    right: 0px;
}
.jnews-top .jnews-toggle {
    bottom: 5px;
}
.jnews-bottom .jnews-toggle {
    top: 5px;
}
.jnews-top .jnews-toggle .toggle {
    display: block;
}
/*
	Mobile
 */
 @media (max-width: 480px) {
    .jnewsbar > div > h2, .jnewsbar li span {
        display: none;
    }
    .jnewsbar ul.jnewsbar-items {
        width: 85%;
        padding:0px 10px;
    }
    .jnewsbar ul.jnewsbar-items li a {
        display: block;
        width: 9999%;
        overflow: hidden;
        text-align: left;
    }
    .jnewsbar-navigate {
        width: 12%;
        padding: 0px;
    }
}
/*
	Fade Effect Custom Css
 */

/*.jnewsbar.jnews-fade ul li{
	position: absolute;
	opacity: 0;
}*/

/*
	Themes
 */

/* Dark */
 .jnews-dark {
    background: #2d2d2d;
    border-color: #000;
}
.jnews-dark,...

JavaScript

if (typeof Object.create !== 'function') {
    Object.create = function (obj) {
        function F() {};
        F.prototype = obj;
        return new F()
    }
}(function ($, window, document, undefined) {
    var Newsbar = {
        init: function (options, elem) {
            var self = this;
            self.elem = elem;
            self.$elem = $(elem);
            self.options = $.extend({
                onHover: function () {}
            }, $.fn.jNewsbar.options, options);
            self.options.pauseTime = self.options.pauseTime + self.options.animSpeed;
            self.buildFrag();
            self.display()
        },
        buildFrag: function () {
            var self = this;
            self.$elem.addClass('jnewsbar jnews-' + self.options.theme + ' jnews-' + self.options.position + ' jnews-' + self.options.effect).css(self.options.position, 0).show();
            self.$elem.find("h2").wrap('<div class="jnewsbar-title"></div>').css({
                "font-size": self.options.height - 5 + "px",
                    "height": self.options.height + "px",
                    "line-height": self.options.height + "px"
            });
            self.$elem.find("ul").wrap('<div></div>').addClass('jnewsbar-items');
            self.$elem.css({
                "height": self.options.height + "px",
                    "line-height": self.options.height + "px"
            });
            self.$elem.find("li").css({
                "height": self.options.height + "px",
                    "line-height": self.options.height + "px",
                    "overflow": "hidden"
            });
            self.$elem.append(self.buildControls())
        },
        buildControls: function () {
            var self = this;
            return '<div class="jnewsbar-navigate"><a href="#" class="prev" alt="Previous">&laquo;</a> <a href="#" class="next" alt="Next">&raquo;</a></div><div class="jnews-toggle"><a href="#" class="toggle"  style="height:' + self.options.height...