JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<link rel="stylesheet" href="http://alekse.20121213.oscdev2.searchrev.com/css/styles.css">
    <ul id="summaryAlerts">
    <li class="optTicker item" title="Average vs Yesterday / CLICKS / Adwords">
        <div class="tickName">CLICKS</div>12280.93 -≻ 13990'&gt;
        <div class="tickNumber">+13.9%</div>
        <div class="arrow-up arrow-amber"></div>
    </li>
    <li class="optTicker item" title="Average vs Yesterday / COST / Adwords">
        <div class="tickName">COST</div>437.02 -≻ 478.98'&gt;
        <div class="tickNumber">+9.6%</div>
        <div class="arrow-up arrow-amber"></div>
    </li>
    <li class="optTicker item" title="Average vs Yesterday / ORDERS / Adwords">
        <div class="tickName">ORDERS</div>0 -≻ 0'&gt;
        <div class="tickNumber">-100%</div>
        <div class="arrow-down"></div>
    </li>
    <li class="optTicker item" title="Average vs Yesterday / CPO / Adwords">
        <div class="tickName">CPO</div>0 -≻ 0'&gt;
        <div class="tickNumber">-100%</div>
        <div class="arrow-down arrow-green"></div>
    </li>
    <li class="optTicker item" title="Average vs Yesterday / CPA / Adwords">
        <div class="tickName">CPA</div>0.01 -≻ 0.01'&gt;
        <div class="tickNumber">+13.2%</div>
        <div class="arrow-up arrow-red"></div>
    </li>
    <li class="optTicker item" title="Average vs Yesterday / REVENUE / Adwords">
        <div class="tickName">REVENUE</div>0 -≻ 0'&gt;
        <div class="tickNumber">-100%</div>
        <div class="arrow-down"></div>
    </li>
    </ul>

CSS

#summaryAlerts {
                height: 32px;
                overflow: hidden;
                width:100%;
            }
            #summaryAlerts li {
                height: 32px;
                display:block;
                clear:both
                /* This is to ensure that there is no overlap */
            }

JavaScript

function newsticker() {
                $('#summaryAlerts li:first').animate({
                    'opacity': 0
                }, 300, function () {
                    $(this).appendTo($('#summaryAlerts')).css('opacity', 1);
                });
            }
            setInterval(function () {
                newsticker()
            }, 3000)