Infinite Project Carousel - Copy this Angular, Tailwind Component to your project

Crea un carrusel infinito con cards, de derecha a izquierda guiate de esto<div class="py 20 overflow hidden" [ngClass]="isDarkMode ? 'bg [#0A0A0A]' : 'bg white'"> <div class="container mx auto px 4 mb 10"> <h2 class="text 4xl font bold text center mb 9" [ngClass]="isDarkMode ? 'text white' : 'text gray 800'"> Mis proyectos </h2> </div> <! Carrusel que se desplaza a la IZQUI > <div class="project scroll container flex gap 0 overflow hidden relative"> <! Clonado Inicial > <div class="scroll wrapper flex" [style.animation duration]="scrollSpeed + 's'"> <div class="project card flex shrink 0 w [300px] sm:w [350px] lg:w [400px] bg gray 100 rounded lg overflow hidden shadow lg" *ngFor="let project of projects" [ngClass]="isDarkMode ? 'bg gray 900 text white' : 'bg gray 100 text gray 800'"> <img [src]="project.image" [alt]="project.title" class="w full h 48 object cover rounded t lg" /> <div class="p 6"> <h3 class="text xl font bold mb 2">{{ project.title }}</h3> <p class="text sm" [ngClass]="isDarkMode ? 'text gray 300' : 'text gray 600'"> {{ project.description }} </p> </div> </div> </div> <! Proyectos Originales > <div class="scroll wrapper flex" [style.animation duration]="scrollSpeed + 's'"> <div class="project card flex shrink 0 w [300px] sm:w [350px] lg:w [400px] bg gray 100 rounded lg overflow hidden shadow lg" *ngFor="let project of projects" [ngClass]="isDarkMode ? 'bg gray 900 text white' : 'bg gray 100 text gray 800'"> <img [src]="project.image" [alt]="project.title" class="w full h 48 object cover rounded t lg" /> <div class="p 6"> <h3 class="text xl font bold mb 2">{{ project.title }}</h3> <p class="text sm" [ngClass]="isDarkMode ? 'text gray 300' : 'text gray 600'"> {{ project.description }} </p> </div> </div> </div> <! Clonado Final > <div class="scroll wrapper flex" [style.animation duration]="scrollSpeed + 's'"> <div class="project card flex shrink 0 w [300px] sm:w [350px] lg:w [400px] bg gray 100 rounded lg overflow hidden shadow lg" *ngFor="let project of projects" [ngClass]="isDarkMode ? 'bg gray 900 text white' : 'bg gray 100 text gray 800'" appSlowScroll> <img [src]="project.image" [alt]="project.title" class="w full h 48 object cover rounded t lg" /> <div class="p 6"> <h3 class="text xl font bold mb 2">{{ project.title }}</h3> <p class="text sm" [ngClass]="isDarkMode ? 'text gray 300' : 'text gray 600'"> {{ project.description }} </p> </div> </div> </div> </div> <! Carrusel que se desplaza a la DEREC > <div class="project scroll container flex gap 0 overflow hidden relative mt 14"> <! Clonado Inicial > <div class="scroll wrapper left flex" [style.animation duration]="scrollSpeed + 's'"> <div class="project card flex shrink 0 w [300px] sm:w [350px] lg:w [400px] bg gray 100 rounded lg overflow hidden shadow lg" *ngFor="let project of reversedProjects" [ngClass]="isDarkMode ? 'bg gray 900 text white' : 'bg gray 100 text gray 800'"> <img [src]="project.image" [alt]="project.title" class="w full h 48 object cover rounded t lg" /> <div class="p 6"> <h3 class="text xl font bold mb 2">{{ project.title }}</h3> <p class="text sm" [ngClass]="isDarkMode ? 'text gray 300' : 'text gray 600'"> {{ project.description }} </p> </div> </div> </div> <! Proyectos Originales > <div class="scroll wrapper left flex" [style.animation duration]="scrollSpeed + 's'"> <div class="project card flex shrink 0 w [300px] sm:w [350px] lg:w [400px] bg gray 100 rounded lg overflow hidden shadow lg" *ngFor="let project of projects" [ngClass]="isDarkMode ? 'bg gray 900 text white' : 'bg gray 100 text gray 800'"> <img [src]="project.image" [alt]="project.title" class="w full h 48 object cover rounded t lg" /> <div class="p 6"> <h3 class="text xl font bold mb 2">{{ project.title }}</h3> <p class="text sm" [ngClass]="isDarkMode ? 'text gray 300' : 'text gray 600'"> {{ project.description }} </p> </div> </div> </div> <! Clonado Final > <div class="scroll wrapper left flex" [style.animation duration]="scrollSpeed + 's'"> <div class="project card flex shrink 0 w [300px] sm:w [350px] lg:w [400px] bg gray 100 rounded lg overflow hidden shadow lg" *ngFor="let project of projects" [ngClass]="isDarkMode ? 'bg gray 900 text white' : 'bg gray 100 text gray 800'" appSlowScroll> <img [src]="project.image" [alt]="project.title" class="w full h 48 object cover rounded t lg" /> <div class="p 6"> <h3 class="text xl font bold mb 2">{{ project.title }}</h3> <p class="text sm" [ngClass]="isDarkMode ? 'text gray 300' : 'text gray 600'"> {{ project.description }} </p> </div> </div> </div> </div> </div>