Hide a div partially from visible to invisible with smooth effect

Question

I am using Next js app to build a testimonial section. Everything else is build. I just want to make the outer cards partially invisible just like shown in the picture below. Any ideas on how to achieve this. Screenshot

I have googled for various options, used ChatGpt but nothing came to my mind This is the HTML and tailwind section to view the cards.

<div className='flex flex-row justify-start gap-x-[20px] overflow-x-auto no-scrollbar pointer-events-none max-w-6xl w-full' ref={containerRef}>
                {testimonialData.map((testimonial, index) => (
                    <div className={`relative flex flex-col max-w-[32%] min-w-[32%]`} id={`testimonial-${index}`}>
                        <div className='testimonials-bg h-[220px] absolute top-0 w-full'></div>
                        <div key={index} className="p-[20px] testimonials-border h-[220px] relative">
                            <p className="text-white text-sm mb-[20px]">{testimonial.message}</p>
                            <div className='absolute bottom-[20px] left-[20px] flex flex-row justify-start gap-x-[10px] items-center'>
                                <div className='flex w-[48px] h-[48px] rounded-full justify-center items-center bg-[#D26783] text-white'>
                                    {testimonial.iconText}
                                </div>
                                <p className="text-white text-sm font-medium">{testimonial.customerName}</p>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

Answer 1

I recommend using psuedo elements to place boxes over the ends of the flex-row. Once the left and right cards are obscured, use a CSS gradient to fade the borders into the background color.

.column-wrap {
  position: relative;
}
.column-wrap:before {
  content: ' ';
  background: rgb(44,27,45);
  background: linear-gradient(90deg, rgba(44,27,45,0.5) 0%, rgba(44,27,45,0) 35%);
  height: 100%;
  width: 100px;
  position: absolute;
  left: 0;
}
.column-wrap:after {
  content: ' ';
  background: rgb(44,27,45);
  background: linear-gradient(90deg, rgba(44,27,45,0.5) 0%, rgba(44,27,45,0) 35%);
  height: 100%;
  width: 100px;
  position: absolute;
  right: 0;
}

Diagram: https://i.sstatic.net/jzztX.jpg