JSFiddle - React, Tailwind, and code Playground

HTML

<p class="marquee"><span>
Here's some text.
</span></p>

<p class="marquee"><span>
Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. 
Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. 
Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. 
Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. 
Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. 
Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. 
Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. 
Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. Here's some text. 
</span></p>

CSS

.marquee {
    /* margin-left: auto;
    margin-right: auto; */
    width: 800px;
    height: 25px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #FF0000;
    background: GhostWhite;
    color: black;
    font-size: 20px;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 2s linear infinite;
}



/* Make it move */
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
 }

JavaScript

$('p.marquee span').each(function() {
   var len = $(this).html().length;
   var speed = 100;
   var time = 4 + (4*len)/speed;
   $(this).attr('style', 'animation: marquee '+time+'s linear infinite;');
});