JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="marquee">
  <div class="marquee__inner">
    <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 {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  gap: 2rem; /* Adjust spacing between logos */
  position: relative;
}

.marquee__inner {
  display: flex;
  gap: 2rem;
        animation-direction: alternate;
  animation: marquee 10s linear infinite;
}

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

/* Ensure smooth looping by duplicating logos */
.marquee__inner > img {
  flex: 0 0 auto;
  width: 100px; /* Adjust based on logo size */
  height: auto;
  background-color: red;
  aspect-ratio: 3/2;
}