JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="marquee">
  <div class="track">
    <div class="marquee-text">&nbsp;Test1 &#8226; Test2 &#8226; Test3 &#8226; Test4 &#8226; Test5 &#8226;</div>
  </div>
</div>

CSS

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-75%);
  }
}

@keyframes marquee-r {
  from {
    transform: translateX(-75%);
  }
  to {
    transform: translateX(0);
  }
}
.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 10em;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .marquee {
    height: 6em;
  }
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 30s linear infinite;
}

.marquee-text {
  font-size: 10em;
  color: #3395F7;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #3395F7;
}

@media screen and (max-width: 768px) {
  .marquee-text {
    font-size: 6em;
  }
}