Tailwind CSS Testimonials Components – Vista Library

<section class="bg-darkPink-900 py-28" x-data="{ activeSlide: 1 }">
    <div class="container mx-auto px-4">
        <p class="mb-6 uppercase text-pink-400 text-xs text-center tracking-widest">WHAT THEY SAY ABOUT US</p>
        <h1 class="font-heading text-white text-center text-3xl md:text-5xl font-bold mb-20">Testimonials</h1>
        <div class="relative max-w-3xl mx-auto mb-24">
            <div class="relative z-50 rounded-3xl bg-pink-500 py-10 pl-12 pr-20">
                <div class="absolute right-8 -bottom-6">
                    <svg xmlns="http://www.w3.org/2000/svg" width="44" height="33" viewBox="0 0 44 33" fill="none">
                        <path d="M26.7544 29.8238C24.3526 32.9439 19.6474 32.9439 17.2456 29.8238L1.72343 9.65996C-1.31375 5.71454 1.49884 -4.5898e-06 6.47787 -4.15452e-06L37.5221 -1.44054e-06C42.5012 -1.00526e-06 45.3138 5.71455 42.2766 9.65996L26.7544 29.8238Z" fill="#F53D6C"></path>
                    </svg>
                </div>
                <h2 :class="{ 'block': activeSlide == 1, 'hidden': activeSlide != 1 }" class="text-white text-3xl md:text-4xl font-medium">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</h2>
                <h2 :class="{ 'block': activeSlide == 2, 'hidden': activeSlide != 2 }" class="hidden text-white text-3xl md:text-4xl font-medium">We rely on Vista's bookkeeping software for our daily operations, and we couldn't be more pleased with its functionality and efficiency.</h2>
                <h2 :class="{ 'block': activeSlide == 3, 'hidden': activeSlide != 3 }" class="hidden text-white text-3xl md:text-4xl font-medium">Vista's bookkeeping software has become an indispensable tool in our workflow, making our accounting tasks seamless and hassle-free.</h2>
                <h2 :class="{ 'block': activeSlide == 4, 'hidden': activeSlide != 4 }" class="hidden text-white text-3xl md:text-4xl font-medium">Thanks to Vista's exceptional bookkeeping software, managing our financial records has never been easier. It's truly a game-changer for our business.</h2>
            </div>
            <div class="absolute -bottom-6 -right-4 w-full h-52 rounded-3xl bg-white bg-opacity-10"></div>
        </div>
        <div class="flex justify-center gap-2">
            <button class="rounded-3xl h-1 w-8 bg-white" x-on:click="activeSlide = 1" :class="{ 'bg-white': activeSlide == 1, 'bg-white bg-opacity-10': activeSlide != 1 }"></button>
            <button class="rounded-3xl h-1 w-8 bg-white bg-opacity-10" x-on:click="activeSlide = 2" :class="{ 'bg-white': activeSlide == 2, 'bg-white bg-opacity-10': activeSlide != 2 }"></button>
            <button class="rounded-3xl h-1 w-8 bg-white bg-opacity-10" x-on:click="activeSlide = 3" :class="{ 'bg-white': activeSlide == 3, 'bg-white bg-opacity-10': activeSlide != 3 }"></button>
            <button class="rounded-3xl h-1 w-8 bg-white bg-opacity-10" x-on:click="activeSlide = 4" :class="{ 'bg-white': activeSlide == 4, 'bg-white bg-opacity-10': activeSlide != 4 }"></button>
        </div>