JSFiddle - React, Tailwind, and code Playground

by youssef moudine

HTML

<div class="breaking-news">
  <div class="wrapper">
    <strong class="br-title">Breaking</strong>
    <div class="br-article-list">
      <div class="br-article-list-inner">
        <div class="br-article"><a href="#0">Work From Home<strong>Grandmother Posts Photos Of Grandaughter's Recital, Earns $12,433</strong></a><a href="#" class="post-title-comment"><i class="po po-portus"></i>193</a></div>
        <div class="br-article"><a href="#0">Internet Marketing<strong>Single Mom Earns $4200 Weekly Sharing Funny Cat Videos</strong></a><a href="post.html#comments" class="post-title-comment"><i class="po po-portus"></i>89</a></div>
        <div class="br-article"><a href="#0">Home Business<strong>Retired Army Officer Earns $9100 Monthly Posting Healthy Recipes</strong></a><a href="post.html#comments" class="post-title-comment"><i class="po po-portus"></i>89</a></div>
      </div>
    </div>
  </div>
</div>

CSS

.breaking-news {
  display: block;
  background-color: #292929;
  color: #c6c6c6;
  overflow: hidden;
}

.breaking-news .wrapper {
  position: relative;
}

.breaking-news .br-title {
  display: block;
  overflow: hidden;
  position: relative;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.8px;
  text-transform: uppercase;
  color: #efc220;
  line-height: 46px;
  cursor: default;
}

.breaking-news .br-navi {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 46px;
  line-height: 43px;
  cursor: default;
}

.breaking-news .br-navi a {
  display: inline-block;
  position: relative;
  margin-left: 0;
  line-height: 26px;
  width: 26px;
  text-align: center;
  border-radius: 50%;
  vertical-align: middle;
  background-color: transparent;
  color: #fff;
  font-size: 10px;
}

.breaking-news .br-navi a:before {
  display: block;
  content: '';
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #efc220;
  border-radius: 50%;
  opacity: .1;
  filter: alpha(opacity=10);
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
}

.breaking-news .br-navi a:hover:before {
  opacity: 1;
  filter: alpha(opacity=100);
}

.breaking-news .br-navi a i {
  display: block;
  position: relative;
  z-index: 2;
}

.breaking-news .br-navi a:hover {
  color: #232323;
}

.breaking-news .br-article-list {
  display: block;
  position: absolute;
  left: 130px;
  top: 0;
  right: 0;
  line-height: 46px;
  font-size: 12px;
  overflow: hidden;
}

.breaking-news .br-article-list:after,.breaking-news .br-article-list:before {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 100%;
  width: 100px;
  height: 100%;
  box-shadow: 5px 0 60px 40px #292929;
  content: '';
}

.breaking-news .br-article-list:before {
  left: auto;
  right: 100%;
}

.breaking-news .br-article-list a {
  color: #c6c6c6;
  display: inline-block;
  line-height:...

JavaScript

! function(e) {
    "use strict";

    function t() {
        var e = 0;
        jQuery(".br-article-list-inner", ".br-article-list").each(function() {
            var t = jQuery(this),
                a = e;
            if (e += 1, t.find(".br-article").size() > 0) {
                if (!i) return !1;
                var h = (parseInt(t.find(".br-article").css("margin-right"), 10), parseInt(t.parent().css("width"), 10), t),
                    g = 0;
                h.find(".br-article").each(function() {
                    g = g + parseInt(jQuery(this).width(), 10) + parseInt(jQuery(this).css("padding-right"), 10) + parseInt(jQuery(this).css("margin-right"), 10)
                });
                d[a] = g / 2, c[a] && (jQuery(this).parent().parent().parent().addClass("isscrolling"), jQuery(".br-article-list-inner").eq(a).parent().parent().parent().attr("rel", a), t.find(".br-article").clone().appendTo(this), c[a] = !1);
                var y = d[a] + l[a];
                Math.abs(y) <= Math.abs(s[a]) && o(a), u[a] || (u[a] = setInterval(function() {
                    r(t, a)
                }, n))
            }
        }), setTimeout(function() {
            new t
        }, n)
    }

    function r(e, t) {
        s[t] = s[t] - 1, e.css("left", s[t] + "px")
    }

    function o(e) {
        s[e] = 0, jQuery(".br-article-list").eq(e).find(".br-article-list-inner").css("left", "0px")
    }

    function a(e, t) {
        var r = document.createElement("CANVAS"),
            o = r.getContext("2d"),
            a = new Image;
        return r.height = t, r.width = e, o.drawImage(a, 0, 0), setTimeout(function() {
            r = null
        }, 10), r.toDataURL("image/png")
    }
    var i = !0,
        n = 40,
        s = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        l = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        c = [!0, !0, !0, !0, !0, !0, !0, !0, !0, !0],
        u = [],
        d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    Array.prototype.forEach2 = function(e) {
     ...