Tailwind CSS Reviews Components – Yofte Library

<section class="relative py-20 md:pt-32 bg-blue-800 overflow-x-hidden" x-data="{ showContent: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute h-24 md:h-auto top-0 left-0 right-0" src="yofte-assets/elements/line-top.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <h2 class="mb-20 text-5xl text-white font-bold font-heading">What Customers Say</h2>
    <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="relative max-w-4xl mx-auto">
              <div class="absolute inset-0 border border-gray-500 my-8 -ml-6 -mr-6"></div>
              <div class="relative mx-auto mb-20 py-12 md:py-28 bg-blue-800 border border-white">
                <img class="w-32 h-32 mb-10 mx-auto rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
                <div class="relative max-w-2xl px-4 mx-auto">
                  <img class="hidden md:block absolute top-0 left-0" src="yofte-assets/elements/quote.svg" alt="">
                  <img class="hidden md:block absolute top-0 right-0" src="yofte-assets/elements/quote.svg" alt="">
                  <div class="max-w-md mx-auto px-4">
                    <h3 class="mb-16 text-2xl font-bold font-heading text-white">Tonight I had interdum at ante porta, eleifend feugiat nunc. In semper euismod mi a accumsan. Thaaank you! 👏💥</h3>
                    <div class="flex flex-wrap items-center">
                      <p class="mb-6 md:mb-0 text-gray-300">Alice Kenowski, NYC</p>
                      <div class="ml-auto flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
                          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
                          </svg>
                        </button>
                        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md">