JSFiddle - React, Tailwind, and code Playground

HTML

<div id="marquee1" class="marquee">
  <div class="marquee__inner">Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit.</strong>&nbsp;</div>
</div>

<div id="marquee2" class="marquee">
  <div class="marquee__inner">Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit.</strong>&nbsp;</div>
</div>

CSS

.marquee {
  overflow: hidden;
  font-size: 0;
  font-family: sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.marquee__inner {
  font-size: 2rem;
  white-space: nowrap;
  display: inline-block;
}

JavaScript

function animateMarquee(el, duration) {
  const innerEl = el.querySelector('.marquee__inner');
  const innerWidth = innerEl.offsetWidth;
  const cloneEl = innerEl.cloneNode(true);
  el.appendChild(cloneEl);
  
  let start = performance.now();
  let progress;
  let translateX;

  requestAnimationFrame(function step(now) {
    progress = (now - start) / duration;
 
    if (progress > 1) {
    	progress %= 1;
      start = now;
    }

    translateX = innerWidth * progress;
    
    innerEl.style.transform = `translate3d(-${translateX}px, 0 , 0)`;
    cloneEl.style.transform = `translate3d(-${translateX}px, 0 , 0)`;
    requestAnimationFrame(step);
  });
}

const marquee1 = document.querySelector('#marquee1');
const marquee2 = document.querySelector('#marquee2');

animateMarquee(marquee1, 10000);
animateMarquee(marquee2, 15000);