Tailwind Testimonials Components in Consulty library

<div class="px-8 md:px-20 py-32 bg-center bg-no-repeat bg-cover relative" x-data="{ activeSlide: 1, slideCount: 3 }" style="background-image: url('consulty-assets/testimonials/background1.png')">
    <img class="mb-8 mx-auto h-14" src="consulty-assets/testimonials/quote-icon.svg" alt="">
    <div class="flex items-center justify-between gap-4 mb-14">
        <a href="#" x-on:click.prevent="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="relative z-20 border border-gray-700 w-16 h-16 p-5 hidden lg:flex items-center justify-center text-gray-700 hover:text-white hover:border-white transition duration-200 rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M10 19L3 12M3 12L10 5M3 12L21 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </a>
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex transition-transform duration-500 ease-in-out">
                <div class="flex-shrink-0 w-full">
                    <p class="text-white text-2xl md:text-4xl text-center max-w-6xl mx-auto tracking-tight">There are many variations of passages of Ipsum available, but the majority have suffered alteration in some It is a long established fact that a reader will be distracted by the readable content of a page its layout.</p>
                </div>
                <div class="flex-shrink-0 block w-full">
                    <p class="text-white text-2xl md:text-4xl text-center max-w-6xl mx-auto tracking-tight">Numerous versions of Ipsum passages exist, yet most have undergone some form of alteration. It has been widely acknowledged that a reader's attention can be diverted by the presentable layout of a page.</p>
                </div>
                <div class="flex-shrink-0 block w-full">
                    <p class="text-white text-2xl md:text-4xl text-center max-w-6xl mx-auto tracking-tight">While there are countless iterations of Ipsum passages, the bulk have experienced modifications in one way or another. It remains an undisputed truth that the arrangement of content on a page can significantly impact a reader's focus.</p>
                </div>
            </div>
        </div>
        <a href="#" x-on:click.prevent="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="border border-gray-700 w-16 h-16 p-5 hidden lg:flex items-center justify-center text-gray-700 hover:text-white hover:border-white transition duration-200 rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </a>
    </div>
    <div class="flex lg:hidden gap-4 justify-center mb-12">
        <a href="#" class="relative z-20 border border-gray-700 w-16 h-16 p-5 flex items-center justify-center text-gray-700 hover:text-white hover:border-white transition duration-200 rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M10 19L3 12M3 12L10 5M3 12L21 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </a>
        <a href="#" class="border border-gray-700 w-16 h-16 p-5 flex items-center justify-center text-gray-700 hover:text-white hover:border-white transition duration-200 rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </a>
    </div>
    <div class="overflow-hidden">
        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex transition-transform duration-500 ease-in-out">
            <div class="flex-shrink-0 w-full">
                <div class="border-t border-white border-opacity-10 pt-6 flex items-center justify-center gap-3 flex-wrap max-w-3xl mx-auto">
                    <img class="h-11" src="consulty-assets/testimonials/avatar1.png" alt="">
                    <p class="tracking-tight text-lg font-medium">
                        <span class="text-white">Cameron Williamson</span>
                        <span class="text-white text-opacity-40">- Project Manager</span>
                    </p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <div class="border-t border-white border-opacity-10 pt-6 flex items-center justify-center gap-3 flex-wrap max-w-3xl mx-auto">
                    <img class="h-11" src="consulty-assets/testimonials/avatar1.png" alt="">
                    <p class="tracking-tight text-lg font-medium">
                        <span class="text-white">Emily Summers</span>
                        <span class="text-white text-opacity-40">- Product Designer</span>
                    </p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <div class="border-t border-white border-opacity-10 pt-6 flex items-center justify-center gap-3 flex-wrap max-w-3xl mx-auto">
                    <img class="h-11" src="consulty-assets/testimonials/avatar1.png" alt="">
                    <p class="tracking-tight text-lg font-medium">
                        <span class="text-white">Alexander Blake</span>
                        <span class="text-white text-opacity-40">- UX Designer</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>