JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="marquee">
  <div class="marquee-content">
    <img src="logo1.png" alt="Logo 1">
    <img src="logo2.png" alt="Logo 2">
    <img src="logo3.png" alt="Logo 3">
    <img src="logo4.png" alt="Logo 4">
    <img src="logo5.png" alt="Logo 5">
    <img src="logo6.png" alt="Logo 6">
    <img src="logo7.png" alt="Logo 7">
    <img src="logo8.png" alt="Logo 8">
    <img src="logo1.png" alt="Logo 1">
    <img src="logo2.png" alt="Logo 2">
    <img src="logo3.png" alt="Logo 3">
    <img src="logo4.png" alt="Logo 4">
    <img src="logo5.png" alt="Logo 5">
    <img src="logo6.png" alt="Logo 6">
    <img src="logo7.png" alt="Logo 7">
    <img src="logo8.png" alt="Logo 8">
  </div>
</div>

CSS

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: flex;
  gap: 2rem;
  animation: marquee 15s linear infinite;
}

.marquee-content img {
  flex: 0 0 auto;
  width: 100px; /* Adjust based on logo size */
  height: auto;
  background-color: red;
  aspect-ratio: 3/2;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Optional: Pause on hover */
.marquee:hover .marquee-content {
  animation-play-state: paused;
}