<div class="Marquee">
  <div class="Marquee-content">
    <div class="Marquee-start">Thank you for renewing your season tickets!</div>
    <div class="Marquee-tag">Test Person 1</div>
    <div class="Marquee-tag">Test Person 2</div>
    <div class="Marquee-tag">Test Person 3</div>
    <div class="Marquee-tag">Test Person 4</div>
    <div class="Marquee-tag">Test Person 5</div>
    <div class="Marquee-tag">Test Person 6</div>
    <div class="Marquee-tag">Test Person 7</div>
    <div class="Marquee-tag">Test Person 8</div>
    <div class="Marquee-tag">Test Person 9</div>
    <div class="Marquee-start">Thank you for renewing your season tickets!</div>
    <div class="Marquee-tag">Test Person 1</div>
    <div class="Marquee-tag">Test Person 2</div>
    <div class="Marquee-tag">Test Person 3</div>
    <div class="Marquee-tag">Test Person 4</div>
    <div class="Marquee-tag">Test Person 5</div>
    <div class="Marquee-tag">Test Person 6</div>
    <div class="Marquee-tag">Test Person 7</div>
    <div class="Marquee-tag">Test Person 8</div>
    <div class="Marquee-tag">Test Person 9</div>
  </div>
</div>
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 16px;
  font-family: 'proxima nova', 'open sans', 'Helvetica', sans-serif;
}
.Marquee {
  background: #002649;
  width: 85vw;
  box-sizing: border-box;
  padding: 1em;
  color: #fff;
  font-weight: 200;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.Marquee-content {
  display: flex;
  animation: marquee 15s linear infinite running;
}
.Marquee-start {
  width: 350px;
  margin: 0 0.5em;
  padding: 0.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.Marquee-tag {
  width: 100px;
  margin: 0 0.5em;
  padding: 0.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
@-moz-keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translate(-50%);
  }
}
@-webkit-keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translate(-50%);
  }
}
@-o-keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translate(-50%);
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translate(-50%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.