JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-right-panel-main-panel-feed">
    <div id="marquee" class="content-right-panel-main-panel-feed-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim a - (space)#DIRECTVInteractivo</div>
</div>
<div class="footer-feed">
    <div class="footer-feed-content">Alert1: Read This! This is an important feed about nothing</div>
</div>

CSS

.content-right-panel-main-panel-feed {
    height: 30px;
    vertical-align: middle;
    background: #0274AA;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding-top: 10px;
    padding: 10px 7px 0px 7px;
    margin: 0 5px;
    overflow: hidden;
    position: relative;
}
.content-right-panel-main-panel-feed-content {
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
}
.footer-feed {
    height: 20px;
    background: #0274AA;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 10px 5px 10px 5px;
    padding: 10px;
    position: relative;
    overflow: hidden;
}
.footer-feed-content {
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
}

JavaScript

var prefixes = ["-webkit-","-moz-","-ms-","-o-",""];

function marqueeAnimation(content, animate) {
    var ow = content.parent().outerWidth(); // Container width
    var w = content.outerWidth(); // Content width
    var t = ow+w; // Travel (container + width of content)
    var pps = 100; // Pixels per second
    var s = t/pps; // Seconds
    
    var keyframeRules = "";
    for (var i = 0; i < prefixes.length; i++) {
        keyframeRules += '@' + prefixes[i] + 'keyframes ' + animate + ' {\n' +
            '    0% { left: ' + ow + 'px; }\n' +
            '    100% { left: -' + w + 'px; }\n' +
            '}\n';
    };
        
    keyframeRules += ' .'+animate+' { \n';
    for(p in prefixes){
        keyframeRules += '    '+prefixes[p]+'animation: '+animate+' '+s+'s linear infinite; \n';
    }
    keyframeRules += "}";
    $('head').append($('<style/>').html(keyframeRules));
    content.addClass(animate);
}

marqueeAnimation($('.content-right-panel-main-panel-feed-content'), "marquee_one");
marqueeAnimation($('.footer-feed-content'), "marquee_two");