Brand Carousel - Copy this React, Tailwind Component to your project

use these guide lines - Create structure, define animation using framer motion, create a gradient mask around edges, clone the list for an infinite list animation: { 'infinite-scroll': 'infinite-scroll 25s linear infinite', }, keyframes: { 'infinite-scroll': { from: { transform: 'translateX(0)' }, to: { transform: 'translateX(-100%)' },<div class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-200px),transparent_100%)]"> <ul class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll"> <!-- ... --> </ul> <ul class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll" aria-hidden="true"> <!-- ... --> </ul> </div>