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

'use client' import { PropertyWithImages } from '@/@types/property' import { useRef, useState } from 'react' import Container from './layouts/Conteiner' import PropertyCard from './PropertyCard' export default function CarouselSales({ properties, title, }: { properties: PropertyWithImages[] title: string }) { const [grabbing, setGrabbing] = useState(false) const [startX, setStartX] = useState(0) const [scrollLeft, setScrollLeft] = useState(0) const carouselRef = useRef<HTMLDivElement>(null) const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => { setGrabbing(true) setStartX(e.pageX e.currentTarget.offsetLeft) setScrollLeft(e.currentTarget.scrollLeft) } const handleMouseLeave = () => { setGrabbing(false) } const handleMouseUp = () => { setGrabbing(false) } const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => { if (!grabbing) return e.preventDefault() const x = e.pageX e.currentTarget.offsetLeft const walk = (x startX) * 3 e.currentTarget.scrollLeft = scrollLeft walk } return ( <Container className="relative"> <div className="flex items center p 4"> <div className="flex grow border b [1px]"></div> <span className="px 2 font bold text 2xl uppercase">{title}</span> <div className="flex grow border b [1px]"></div> </div> <div className="carousel cursor grab max w full w full" onMouseDown={handleMouseDown} onMouseLeave={handleMouseLeave} onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} ref={carouselRef} > {properties.map((property) => ( <div className="w full sm:w 1/2 md:w 1/3 lg:w 1/4 flex grow shrink 0 p 2" key={property.id} > <PropertyCard property={property} /> </div> ))} </div> </Container> ) } eu tenho esse carousel porem eu gostaria de muda ele para o canto direito ficar sem pading ou margem para o usuario entender que é um carousel, e quando tiver em uma tela grande ficar nao ser um carousel e ter o wraper