A
Anonymous

Testimonials - Copy this React, Tailwind Component to your project

<div-className="lg:w-1/2">-<h2-className="text-5xl-font-extrabold-tracking-wide-flex-items-center">-<span-className="text-8xl-font-extrabold-leading-none">[</span>-<span-className="text-left-mx-2">-CLIENT-<br-/>-REVIEW-</span>-<span-className="text-8xl-font-extrabold-leading-none">]</span>-</h2>-<div-className="relative-pt-6">-<div-className="overflow-hidden-rounded-lg-shadow-md">-<div-className="flex-transition-transform-duration-500-ease-in-out"-style={{-transform:-`translateX(-${currentSlide-*-100}%)`-}}->-{props.testimonials.map((review,-index)-=>-(-<div-key={index}-className="w-full-flex-shrink-0-p-6-bg-white-space-y-2"->-<h3-className="text-2xl">{review.name}</h3>-<div-className="flex-space-x-2-items-center">-<p-className="text-sm">{review.role}</p>-<p>|</p>-<p-className="text-sm-text-orange-600">-{review.location}-</p>-</div>-<p-className="text-gray-600">{review.review}</p>-</div>-))}-</div>-</div>-<button-onClick={prevSlide}-className="absolute-left-0-top-1/2--translate-y-1/2-bg-white-p-2-rounded-full-shadow-md-hover:bg-gray-100--ml-4"->-<BsChevronLeft-className="text-gray-600"-/>-</button>-<button-onClick={nextSlide}-className="absolute-right-0-top-1/2--translate-y-1/2-bg-white-p-2-rounded-full-shadow-md-hover:bg-gray-100--mr-4"->-<BsChevronRight-className="text-gray-600"-/>-</button>-</div>-</div>-I-updated-the-code-here-remove-the-left-and-right-button-review-and-make-draggable-carousel-for-review-without-left-and-right-button

Prompt
Component Preview

About

testimonials - A draggable carousel showcasing client reviews with names, roles, and locations. Built with React and Tailwind. Copy component code!

Share

Last updated 1 month ago