JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<link rel="stylesheet" href="http://alekse.20121213.oscdev2.searchrev.com/css/styles.css">
<div id="summaryAlerts">
    <div class="optTicker item marquee" title="Average vs Yesterday / COST / Adwords">
        <div class="tickName">COST</div>417.33 -≻ 477.29'&gt;
        <div class="tickNumber">+14.4%</div>
        <div class="arrow-up arrow-amber"></div>
    </div>
    <div class="optTicker item marquee" title="Average vs Yesterday / ORDERS / Adwords">
        <div class="tickName">ORDERS</div>0 -≻ 0'&gt;
        <div class="tickNumber">-100%</div>
        <div class="arrow-down"></div>
    </div>
    <div class="optTicker item marquee" 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>
    </div>
    <div class="optTicker item marquee" title="Average vs Yesterday / CPA / Adwords">
        <div class="tickName">CPA</div>0.01 -≻ 0.01'&gt;
        <div class="tickNumber">+37%</div>
        <div class="arrow-up arrow-red"></div>
    </div>
    <div class="optTicker item marquee" title="Average vs Yesterday / REVENUE / Adwords">
        <div class="tickName">REVENUE</div>0 -≻ 0'&gt;
        <div class="tickNumber">-100%</div>
        <div class="arrow-down"></div>
    </div>
</div>

CSS

#summaryAlerts { height:32px;position: relative;overflow: hidden; background: #eee; max-width: 222px;}

.marquee {
    position: absolute;
    display:block;
    left: 0; right: 0;
    text-align: center;
    transform:translateX(100%);
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);
}
.marquee:nth-child(1) {
    animation: left-one 20s ease infinite;
    -moz-animation: left-one 20s ease infinite;
    -webkit-animation: left-one 20s ease infinite;
}
.marquee:nth-child(2) {
    animation: left-two 20s ease infinite;
    -moz-animation: left-two 20s ease infinite;
    -webkit-animation: left-two 20s ease infinite;
}
.marquee.down {
    transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
}
.marquee.down:nth-child(1) {
    animation: down-one 20s ease infinite;
    -moz-animation: down-one 20s ease infinite;
    -webkit-animation: down-one 20s ease infinite;
}
.marquee.down:nth-child(2) {
    animation: down-two 20s ease infinite;
    -moz-animation: down-two 20s ease infinite;
    -webkit-animation: down-two 20s ease infinite;
}
.marquee.up p {
    transform:translateY(100%);
    -moz-transform:translateY(100%);
    -webkit-transform:translateY(100%);
}
.marquee.up p:nth-child(1) {
    animation: up-one 20s ease infinite;
    -moz-animation: up-one 20s ease infinite;
    -webkit-animation: up-one 20s ease infinite;
}
.marquee.up p:nth-child(2) {
    animation: up-two 20s ease infinite;
    -moz-animation: up-two 20s ease infinite;
    -webkit-animation: up-two 20s ease infinite;
}
/*================================
	Move the Marquee to the Left
==================================*/

/** Mozilla Firefox Keyframes **/
 @-moz-keyframes left-one {
    0% {
        -moz-transform:translateX(100%);
    }
    10% {
        -moz-transform:translateX(0);
    }
    40% {
        -moz-transform:translateX(0);
    }
    50% {
        -moz-transform:translateX(-100%);
    }
    100% {
       ...