Tailwind Testimonials Components in Mirga library

<section x-data="{ activeSlide: 1, slideCount: 3 }" class="py-16 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="p-12 max-w-2xl ml-auto bg-white rounded-4xl">
      <h6 class="mb-10 text-5xl font-medium tracking-tight font-heading">Testimonials</h6>
      <div class="mb-10">
        <div class="py-16 border border-neutral-100 overflow-hidden rounded-4xl">
          <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
            <div class="px-10 inline-block w-full whitespace-normal">
              <p class="text-2xl text-neutral-600 text-center font-semibold max-w-sm mx-auto">“Working with Migra has been a game-changer for our business. Their digital marketing strategies increased our online visibility and drove significant growth in traffic and conversions. Highly recommended!"</p>
            </div>
            <div class="visibility-item px-10 inline-block w-full whitespace-normal">
              <p class="text-2xl text-neutral-600 text-center font-semibold max-w-sm mx-auto">"Collaborating with Mirga has revolutionized our business landscape. Their innovative approach to digital marketing has not only elevated our online presence but also spurred remarkable surges in both website traffic and conversions."</p>
            </div>
            <div class="visibility-item px-10 inline-block w-full whitespace-normal">
              <p class="text-2xl text-neutral-600 text-center font-semibold max-w-sm mx-auto">"Partnering with Mirga has truly transformed our business dynamics. Their unparalleled digital marketing strategies have not only amplified our online visibility but also resulted in substantial boosts in website traffic and conversions."</p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap justify-between -m-4">
        <div class="w-auto p-4">
          <div class="flex flex-wrap items-center -m-3">
            <div class="w-auto p-3">
              <div class="w-16 h-16 overflow-hidden rounded-full">
                <img class="w-full h-full object-cover" src="mirga-assets/images/testimonials/avatar.png" alt="">
              </div>
            </div>
            <div class="w-auto p-3">
              <p class="text-2xl font-semibold tracking-tight">Savia Ellianson</p>
              <p class="font-medium text-neutral-600 tracking-tight">Pink Ox</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-4">
          <div class="flex flex-wrap -m-0.5">
            <div class="w-auto p-0.5">
              <a x-on:click.prevent="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="flex items-center justify-center w-12 h-16 bg-neutral-400 hover:bg-opacity-80 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 18L10.2915 16.7463L3.4452 9.9L18 9.9L18 8.1L3.4452 8.1L10.2726 1.2726L9 3.02789e-06L7.86805e-07 9L9 18Z" fill="white"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto p-0.5">
              <a x-on:click.prevent="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="flex items-center justify-center w-12 h-16 bg-neutral-900 hover:bg-opacity-80 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0L7.7085 1.2537L14.5548 8.1L0 8.1L0 9.9L14.5548 9.9L7.7274 16.7274L9 18L18 9L9 0Z" fill="white"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>