JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  <div class="marquee marquee-horizontal">
    <div class="marquee-wrapper">
      <div class="marquee-content">
        <svg style="height: 26px; width: auto;" id="Layer_1" version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 526.6 28.3" style="" xml:space="preserve">

          <rect y="2.3" class="st0" width="526.6" height="26" />
          <g class="st1">
            <path class="st2" d="M7.2,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5L10,9.8C9.6,9.6,9.1,9.5,8.6,9.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5c0,1.6,0.3,2.8,1,3.6
s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C9.6,20.6,8.5,20.8,7.2,20.8z" />
            <path class="st2" d="M24.6,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3s-0.7-2.2-0.7-3.5
c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S24.6,12.1,24.6,14.1z M14.8,14.1c0,1.6,0.3,2.9,1,3.8
s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3S14.8,12.5,14.8,14.1z" />
            <path class="st2" d="M36.8,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7H28V7.7h1.6
l0.3,1.8H30c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H36.8z" />
            <path class="st2" d="M46.9,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2H41V8.3l1.8-0.8l0.8-2.7h1.1v3h3.7v1.5h-3.7v7.6c0,0.8,0.2,1.4,0.6,1.8S46.2,19.2,46.9,19.2z" />
            <path class="st2" d="M59.1,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5C52.3,8.3,53,8,53.7,7.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H59.1z...

CSS

.marquee-vertical {
  height: 200px;
}

.marquee-content {
  margin: 0;
  padding: 30px;
}

.marquee {
  overflow: scroll;
  margin: 15px 0;
}

.marquee-horizontal {
  white-space: nowrap;
  width: 300px;
}

.marquee-horizontal .marquee-content,
.marquee-horizontal .marquee-wrapper {
  display: inline-block;
}


/*svg css*/

.st0 {
  fill: none;
}

.st1 {
  enable-background: new;
}

.st2 {
  fill: #009444;
}