JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="marquee">  
<div class="1" data-symbol="ASTE" data-title="ASTEC" style="display: none;" ></div>
<div class="2" data-symbol="ATCO-A" data-title="ATLAS" style="display: none;"></div>
<div class="3" data-symbol="BEL" data-title="BELL" style="display: none;"></div>
<div class="4" data-symbol="CAL" data-title="CAT" style=" display: none;"></div>
<div class="5" data-symbol="CNHI" data-title="CHN" style="display: none;"></div>
<div class="6" data-symbol="DE" data-title="DEERE" style="display: none;"></div>
<div class="7" data-symbol="042670" data-title="DOOSAN" style="display: none;"></div>
<div class="8" data-symbol="PIG" data-title="HAULOTTE" style="display: none;"></div>
<div class="9" data-symbol="6305" data-title="HIACHI" style="display: none;"></div>
<div class="10" data-symbol="009540" data-title="HYUNDAI" style="display: none;"></div>
<div class="12" data-symbol="5406" data-title="KOBE" style="display: none;"></div>
<div class="13" data-symbol="6301" data-title="KOMATSU" style="display: none;"></div>
<div class="14" data-symbol="6326" data-title="KUBOTA" style="display: none;"></div>
<div class="15" data-symbol="MTU" data-title="MANITOU" style="display: none;"></div>
<div class="16" data-symbol="MTW" data-title="MANITOW" style="display: none;"></div>
<div class="17" data-symbol="MEO1V" data-title="MESTO" style="display: none;"></div>
<div class="18" data-symbol="PAL" data-title="PALFINGER" style="display: none;"></div>
<div class="19" data-symbol="SAND" data-title="SANDVICK" style="display: none;"></div>
<div class="20" data-symbol="6395" data-title="TADANO" style="display: none;"></div>
<div class="21" data-symbol="TEX" data-title="TEREX" style="display: none;"></div>
<div class="22" data-symbol="VLV" data-title="VOLVO" style="display: none;"></div>
<div class="23" data-symbol="WAC" data-title="WACKER" style="display: none;"></div>
<div class="24" data-symbol="000528" data-title="LIUGONG" style="display:...

CSS

.box {
    width: 100%;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}

.stockSymbolnew {
}
.stockWrapper {
    text-indent: -1000em;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}
.stockSymbol {
    font-weight: 600;
}
.stockPrice {
    font-weight: 600;
    color: red;
}
.stockChange {
    font-weight: 600;
    color: green;
}
.stockTime {
    font-weight: 600;
    color: grey;
    font-size: smaller;
}

.symbol {
    float: left;
    margin-right: 0px;
}
.symbol .name {
    display: block
}
.symbol.up {
    background: #70DB70
}
.symbol.up .change {
    color: green
}
.symbol.down {
    background: #f7cdc2
}
.symbol.down .change {
    color: red
}

.floatleft2 {
    float:left;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 12px;
width: 76px;
}

.floatleft9 {
    float:left;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 12px;
padding-right: 20px;
}
#verticalScroller {
    position: absolute;
    width:268px;
    height: 180px;
    border: 0px solid red;
    overflow: hidden;
}
#verticalScroller > div {
    position:absolute;
    width:268px;
    height:500px;
    border: 0px solid blue;
    overflow:hidden;
}
div.marquee > div > div > div:nth-child(odd) {
    background: #eee;
}
div.marquee > div > div > div {
    margin-right: -6px;
}
.container {
    height: 14em;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
 ...

JavaScript

var gstock = ["NASDAQ:ASTE", "STO:ATCO-A", "JSE:BEL", "BIT:CNHI", "NYSE:DE", "KRX:042670", "EPA:PIG", "TYO:6305", "KRX:009540", "TYO:5406", "TYO:6301", "TYO:6326", "CVE:MTU", "NYSE:MTW", "HEL:MEO1V", "VIE:PAL", "STO:SAND", "TYO:6395", "NYSE:TEX", "EBR:VLV", "FRA:WAC", "SHE:000528", "SHA:600031", "SHE:000425", "SGX:E6A", "HKG:1157", "NYSE:OSK", "OTCMKTS:BZZUY", "NYSE:CX", "ELI:CPR", "LON:CRH", "FRA:HEI", "BCBA:JMIN", "BIT:IT", "EPA:LG", "EPA:SGO", "SWX:SCHN", "EPA:SU", "HKG:1192", "OTCMKTS:WBRBY", "LON:WOS", "ASX:CIM", "ASX:LLC", "TSE:ARE", "ASX:AVJ", "VIE:STR", "SWX:IMPN", "NYSE:KBR", "BME:ACS", "ETR:HOT", "NYSE:FLR", "STO:SKA-B", "EPA:FGR", "TYO:1928", "TYO:1802", "SHA:600170", "TYO:1801", "TYO:1803", "LON:BBY", "KRX:000720", "SHA:600528", "EPA:TEC", "NYSE:JEC", "ETR:GBF", "NYSE:CBI", "BME:FER", "BME:ABG", "SHA:600068", "BME:FCC", "KRX:006360", "LON:NCC", "BME:ANA", "TSE:SNC", "FRA:1AKA", "LON:JGC", "STO:PEAB-B", "IST:ENKAI", "NYSE:EME", "LON:PFC", "NYSE:DHI", "TYO:1808", "NYSE:LEN", "NYSE:PHM", "JSE:AEG", "TYO:1944", "LON:CLLN", "BME:OHL", "AMS:BOKA", "OTCMKTS:ORSDF", "TYO:1860", "TYO:6366", "TYO:1942", "TYO:1881", "TYO:1722", "NYSE:NVR", "NYSE:TPC", "LON:BDEV", "BME:SCYR", "TYO:1821", "TYO:1893", "TYO:1719", "BME:TRE", "MCX:MSTT", "EPA:NXI", "LON:TW", "VIE:POKS", "JSE:MUR", "HKG:3311", "LON:IRV", "TYO:1861", "AMS:ARCAD", "TYO:1924", "LON:AMFW", "LON:MGNS", "LON:PSN", "TYO:1820", "BIT:AST", "ELI:EGL", "LON:KIE", "EBR:CFEB", "BIT:SAL", "HEL:LEM1S", "AMS:HEIJM", "NYSE:TOL", "NYSE:MDR", "LON:BKG", "TYO:6330", "TYO:1883", "TYO:1720", "STO:ICA", "HEL:YTY1V", "LON:GFRD", "NYSE:GVA", "OTCMKTS:DHOXQ", "LON:KLR", "ELI:TDSA", "NYSE:RYL", "NYSE:KBH", "BIT:MT", "LON:LSR", "IST:TKFEN", "LON:ISG", "TYO:1833", "TYO:1885", "NYSE:SPF", "ETR:B5A", "KRX:005830", "BOM:532693", "NYSE:HOV", "NYSE:MTH", "TYO:1762", "TLV:SKBN", "TPE:9933", "LON:BWY", "OTCMKTS:AGRUF", "TLV:AFIL", "AMS:BALNE", "BIT:TFI", "FRA:HLL", "NSE:HCC", "TYO:1884", "FRA:G4S", "TYO:1890", "BKK:ITD", "TYO:1815",...