JSFiddle - React, Tailwind, and code Playground

HTML

<div class="marquee">
  <span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>

CSS

/* Make it a marquee */

.marquee {
  width: 100%;
  left: 0px;
  height: 10%;
  position: fixed;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  background-color: #000000;
  bottom: 0px;
  color: white;
  font: 50px'Verdana';
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee linear infinite;
  animation-delay: 5s;
  background-color: #000000;
  color: white;
  bottom: 0px;
}
/* Make it move */

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

.scroll {
  padding-left: 1.5em;
  position: fixed;
  font: 50px'Verdana';
  bottom: 0px;
  color: white;
  left: 0px;
  height: 10%;
}

JavaScript

function calcSpeed(speed) {
  // Time = Distance/Speed
  var spanSelector = document.querySelectorAll('.marquee span'),
    i;
  for (i = 0; i < spanSelector.length; i++) {
    var spanLength = spanSelector[i].offsetWidth,
      timeTaken = spanLength / speed;
    spanSelector[i].style.animationDuration = timeTaken + "s";
  }
}
calcSpeed(100);