Infinte Marquee Scrolling

Infinte Marquee Scrolling.html

<!--
  Infinte Marquee Scrolling
  Created by Surjitb S M
  https://twitter.com/surjithctly
-->

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" />
  <div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>

  <div class="pointer-events-none relative flex gap-10 overflow-hidden">
    <div class="animate-marquee flex min-w-full shrink-0 items-center justify-around gap-10">
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/s86WhGhp25Y" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/NoRsyXmHGpI" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/uEFombN3J5U" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/MyVH8UVJDBE" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/IoINVPQe738" alt="" />
    </div>
    <div aria-hidden="true" class="animate-marquee flex min-w-full shrink-0 items-center justify-around gap-10">
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/s86WhGhp25Y" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/NoRsyXmHGpI" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/uEFombN3J5U" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/MyVH8UVJDBE" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/IoINVPQe738" alt="" />
    </div>
  </div>

  <div class="pointer-events-none relative mt-10 flex gap-10 overflow-hidden">
    <div class="animate-marquee flex min-w-full shrink-0 items-center justify-around gap-10 [animation-direction:reverse]">
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/UOavP_Z38lE" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/UZe35tk5UoA" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/7-xmprXdiAk" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/PV9QQFDB5W8" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/TSYQ5stQVjg" alt="" />
    </div>
    <div aria-hidden="true" class="animate-marquee flex min-w-full shrink-0 items-center justify-around gap-10 [animation-direction:reverse]">
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/UOavP_Z38lE" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/UZe35tk5UoA" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/7-xmprXdiAk" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/PV9QQFDB5W8" alt="" />
      <img class="aspect-square max-w-[clamp(10rem,28vmin,20rem)] rounded-md object-cover shadow-md" src="https://source.unsplash.com/TSYQ5stQVjg" alt="" />
    </div>
  </div>
</div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        marquee: "marquee 50s linear infinite"
      },
      keyframes: {
        marquee: {
          from: {
            transform: 'translateX(0)',
          },
          to: {
            transform: 'translateX(calc(-100% - 2.5rem))',
          },
        },
      },
    },
  },
  plugins: [],
}