Team Components in Suncealand library

<section class="py-20 md:py-40 bg-purple-50" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-24">
      <h1 class="text-6xl sm:text-7xl xl:text-8xl font-heading font-semibold mb-10">Meet our great team</h1>
      <p class="text-2xl">Record your audio and upload it now.</p>
    </div>
    <div class="max-w-lg lg:max-w-7xl mx-auto px-10 relative">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="hidden lg:inline-block absolute top-0 left-0 mt-14 p-1">
        <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.99906 16L9.41406 14.585L3.82906 9L2.74902 8L3.82906 7L9.41406 1.415L7.99906 8.29971e-07L-0.000937445 8L7.99906 16Z" fill="#04082F"></path>
        </svg>
      </button>
      <div class="md:max-w-3xl xl:max-w-5xl mx-auto">
        <div class="overflow-hidden pt-6">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                    <div class="flex flex-wrap justify-between -mx-4 2xl:-mx-10">
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 mb-16 xl:mb-0">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-yellow-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">LC</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background3.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Lill Caoimhin</h4>
                            <span>Co-Founder</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 sm:pt-6 mb-16 xl:mb-0">
                        <div class="sm:animate-bouncingSlow max-w-xs mx-auto">
                          <div class="relative h-44 bg-blue-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">MA</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background2.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Meave Anders</h4>
                            <span>Co-Founder</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-indigo-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">CR</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background1.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Calvin Ramsay</h4>
                            <span>Graphic Designer</span>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
                    <div class="flex flex-wrap justify-between -mx-4 2xl:-mx-10">
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 mb-16 xl:mb-0">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-yellow-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">JP</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background3.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Jenna Park</h4>
                            <span>Marketing Coordinator</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 sm:pt-6 mb-16 xl:mb-0">
                        <div class="sm:animate-bouncingSlow max-w-xs mx-auto">
                          <div class="relative h-44 bg-blue-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">MW</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background2.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Marcus Wong</h4>
                            <span>Software Engineer</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-indigo-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">EC</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background1.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Emily Chen</h4>
                            <span>UX Researcher</span>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-5">
                    <div class="flex flex-wrap justify-between -mx-4 2xl:-mx-10">
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 mb-16 xl:mb-0">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-yellow-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">AR</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background3.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Alex Reynolds</h4>
                            <span>Product Manager</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10 sm:pt-6 mb-16 xl:mb-0">
                        <div class="sm:animate-bouncingSlow max-w-xs mx-auto">
                          <div class="relative h-44 bg-blue-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">SP</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background2.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Sarah Patel</h4>
                            <span>UI/UX Designer</span>
                          </div>
                        </div>
                      </div>
                      <div class="w-full lg:w-1/3 px-4 2xl:px-10">
                        <div class="max-w-xs mx-auto">
                          <div class="relative h-44 bg-indigo-500 rounded-t-xl">
                            <div class="absolute z-10 bottom-0 left-0 ml-8 mb-3 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">RJ</div>
                            <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 xl:h-52 object-contain xl:object-cover" src="suncealand-assets/images/portait-without-background1.png" alt="">
                          </div>
                          <div class="px-8 pt-6 pb-8 bg-white rounded-b-xl">
                            <h4 class="text-2xl font-medium">Ryan Johnson</h4>
                            <span>Graphic Designer</span>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="hidden lg:inline-block absolute top-0 right-0 mt-14 p-1">
        <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M2.00094 0L0.585938 1.415L6.17094 7L7.25098 8L6.17094 9L0.585938 14.585L2.00094 16L10.0009 8L2.00094 0Z" fill="#04082F"></path>
        </svg>
      </button>
      <div class="text-center lg:hidden mt-16">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block p-1 mr-4">
          <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.99906 16L9.41406 14.585L3.82906 9L2.74902 8L3.82906 7L9.41406 1.415L7.99906 8.29971e-07L-0.000937445 8L7.99906 16Z" fill="#04082F"></path>
          </svg>
        </button>
        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block p-1">
          <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.00094 0L0.585938 1.415L6.17094 7L7.25098 8L6.17094 9L0.585938 14.585L2.00094 16L10.0009 8L2.00094 0Z" fill="#04082F"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</section>