Testimonials Components in Wrexa library

<section class="relative pb-52 bg-gray-900 overflow-hidden">
  <div class="bg-white h-16 mb-32 sm:mb-52">
    <div class="absolute top-0 left-1/2">
      <div class="w-px h-16 bg-gray-900"></div>
      <div class="w-px h-24 bg-white"></div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-20">
      <span class="font-heading text-xl text-white">08</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl text-white">Customer review</span>
    </div>
    <div class="max-w-4xl 3xl:max-w-6xl mx-auto">
      <div class="sm:flex mb-12 items-center">
        <div class="flex-shrink-0 relative max-w-max mr-5 mb-6 sm:mb-0">
          <img class="w-16 h-16 rounded-full object-cover" src="wrexa-assets/images/avatar.png" alt="">
          <img class="absolute bottom-0 right-0 -mb-1 -mr-1" src="wrexa-assets/elements/miro-logo-small-icon.svg" alt="">
        </div>
        <div class="sm:flex items-center sm:mr-20 mb-5 sm:mb-0">
          <h5 class="text-xl text-white font-mono">Helen Keller</h5>
          <div class="ml-4 pl-4 border-l border-gray-600">
            <span class="text-gray-600">Miro, Head of Design</span>
          </div>
        </div>
        <svg width="130" height="22" viewBox="0 0 130 22" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22 8.70801H13.6583L11 0.458008L8.34166 8.70801H0L6.80168 13.548L4.19835 21.5414L11 16.5913L17.8017 21.5414L15.1983 13.548L22 8.70801Z" fill="white"></path>
          <path d="M49 8.70801H40.6583L38 0.458008L35.3417 8.70801H27L33.8017 13.548L31.1984 21.5414L38 16.5913L44.8017 21.5414L42.1983 13.548L49 8.70801Z" fill="white"></path>
          <path d="M76 8.70801H67.6583L65 0.458008L62.3417 8.70801H54L60.8017 13.548L58.1984 21.5414L65 16.5913L71.8017 21.5414L69.1983 13.548L76 8.70801Z" fill="white"></path>
          <path d="M103 8.70801H94.6583L92 0.458008L89.3417 8.70801H81L87.8017 13.548L85.1984 21.5414L92 16.5913L98.8017 21.5414L96.1983 13.548L103 8.70801Z" fill="white"></path>
          <path d="M130 8.70801H121.658L119 0.458008L116.342 8.70801H108L114.802 13.548L112.198 21.5414L119 16.5913L125.802 21.5414L123.198 13.548L130 8.70801Z" fill="white"></path>
        </svg>
      </div>
      <div class="flex -mx-4 mb-32">
        <div class="w-10 px-4 relative">
          <div class="absolute top-0 left-0 ml-12 w-px h-full bg-gray-600"></div>
          <a class="absolute bottom-0 left-0 ml-12 w-10 h-10 mb-12 transform -translate-x-1/2 flex items-center justify-center bg-gray-900 border border-gray-600 rounded-full" href="#">
            <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2L6 6L2 2" stroke="#C6C9CF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div class="w-3/4 px-4">
          <div class="pl-8 sm:pl-20">
            <h2 class="font-heading text-3xl sm:text-5xl 3xl:text-7xl text-white mb-14">“Tried a lot, find the best Tried a lot. Choose this one.”</h2>
            <p class="text-gray-600 font-light">“A real nice tools and app. It comes with a few free plug-ins that will be more than enough for beginners. For more advansed users, you'll need to get a few more plug-ins for an extra cost on 3rd party websites, but Wressa makes it quite easy to set them up.”</p>
          </div>
        </div>
      </div>
      <div class="sm:flex items-center opacity-25">
        <div class="flex-shrink-0 relative max-w-max mr-5 mb-6 sm:mb-0">
          <img class="w-16 h-16 rounded-full object-cover" src="wrexa-assets/images/avatar-male1.png" alt="">
          <img class="absolute bottom-0 right-0 -mb-1 -mr-1" src="wrexa-assets/elements/miro-logo-small-icon.svg" alt="">
        </div>
        <div class="sm:flex items-center sm:mr-20 mb-5 sm:mb-0">
          <h5 class="text-xl text-white font-mono">Helen Keller</h5>
          <div class="ml-4 pl-4 border-l border-gray-600">
            <span class="text-gray-600">Miro, Head of Design</span>
          </div>
        </div>
        <svg width="130" height="22" viewBox="0 0 130 22" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22 8.70801H13.6583L11 0.458008L8.34166 8.70801H0L6.80168 13.548L4.19835 21.5414L11 16.5913L17.8017 21.5414L15.1983 13.548L22 8.70801Z" fill="white"></path>
          <path d="M49 8.70801H40.6583L38 0.458008L35.3417 8.70801H27L33.8017 13.548L31.1984 21.5414L38 16.5913L44.8017 21.5414L42.1983 13.548L49 8.70801Z" fill="white"></path>
          <path d="M76 8.70801H67.6583L65 0.458008L62.3417 8.70801H54L60.8017 13.548L58.1984 21.5414L65 16.5913L71.8017 21.5414L69.1983 13.548L76 8.70801Z" fill="white"></path>
          <path d="M103 8.70801H94.6583L92 0.458008L89.3417 8.70801H81L87.8017 13.548L85.1984 21.5414L92 16.5913L98.8017 21.5414L96.1983 13.548L103 8.70801Z" fill="white"></path>
          <path d="M130 8.70801H121.658L119 0.458008L116.342 8.70801H108L114.802 13.548L112.198 21.5414L119 16.5913L125.802 21.5414L123.198 13.548L130 8.70801Z" fill="white"></path>
        </svg>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pb-24 pb-md-52 bg-dark overflow-hidden">
  <div class="position-relative py-14 mb-40 mb-md-56 bg-white">
    <div class="position-absolute top-0 start-50">
      <div class="py-9 bg-dark" style="width: 1.5px;"></div>
      <div class="py-14 bg-white" style="width: 1.5px;"></div>
    </div>
  </div>
  <div class="container">
    <div class="d-flex align-items-center mb-24"><span class="display-6 h5 mb-0 text-white" >08</span>
      <div class="mx-4 bg-white rounded-circle" style="width: 4px; height: 4px;"></div><span class="display-6 h5 mb-0 text-white" >Customer review</span>
    </div>
    <div class="mw-4xl mx-auto">
      <div class="mb-32">
        <div class="d-md-flex mb-14 align-items-center">
          <div class="d-inline-block position-relative me-md-6 mb-6 mb-md-0"><img class="rounded-circle" style="width: 60px; height: 60px;" src="wrexa-assets/images/avatar.png" alt=""/><img class="position-absolute bottom-0 end-0 me-n1 mb-n1 img-fluid" src="wrexa-assets/elements/miro-logo-small-icon.svg" alt=""/></div>
          <div class="d-flex mb-6 mb-md-0 align-items-center">
            <h5 class="fw-bold text-white mb-0" >Helen Keller</h5>
            <div class="ms-4 me-md-16 ps-4 border-start border-secondary d-inline-block"><span class="text-secondary" >Miro, Head of Design</span></div>
          </div>
          <svg width="130" height="22" viewbox="0 0 130 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22 8.70801H13.6583L11 0.458008L8.34166 8.70801H0L6.80168 13.548L4.19835 21.5414L11 16.5913L17.8017 21.5414L15.1983 13.548L22 8.70801Z" fill="white"></path>
            <path d="M49 8.70801H40.6583L38 0.458008L35.3417 8.70801H27L33.8017 13.548L31.1984 21.5414L38 16.5913L44.8017 21.5414L42.1983 13.548L49 8.70801Z" fill="white"></path>
            <path d="M76 8.70801H67.6583L65 0.458008L62.3417 8.70801H54L60.8017 13.548L58.1984 21.5414L65 16.5913L71.8017 21.5414L69.1983 13.548L76 8.70801Z" fill="white"></path>
            <path d="M103 8.70801H94.6583L92 0.458008L89.3417 8.70801H81L87.8017 13.548L85.1984 21.5414L92 16.5913L98.8017 21.5414L96.1983 13.548L103 8.70801Z" fill="white"></path>
            <path d="M130 8.70801H121.658L119 0.458008L116.342 8.70801H108L114.802 13.548L112.198 21.5414L119 16.5913L125.802 21.5414L123.198 13.548L130 8.70801Z" fill="white"></path>
          </svg>
        </div>
        <div class="position-relative ps-20 ps-md-32">
          <div class="position-absolute top-0 start-0 h-100 ms-8">
            <div class="h-100 bg-secondary" style="width: 1px;"></div><a class="position-absolute bottom-0 start-0 mb-14 translate-middle-x btn p-0 text-secondary" href="#">
              <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18.75" fill="#101010" stroke="currentColor" stroke-width="2.5"></circle>
                <path d="M24 19L20 23L16 19" stroke="#C6C9CF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg></a>
          </div>
          <div>
            <h2 class="display-2 text-white mb-14" >&ldquo;Tried a lot, find the best Tried a lot. Choose this one.&rdquo;</h2>
            <p class="mw-2xl text-secondary lh-lg" >&ldquo;A real nice tools and app. It comes with a few free plug-ins that will be more than enough for beginners. For more advansed users, you&apos;ll need to get a few more plug-ins for an extra cost on 3rd party websites, but Wressa makes it quite easy to set them up.&rdquo;</p>
          </div>
        </div>
      </div>
      <div class="d-md-flex align-items-center opacity-25">
        <div class="d-inline-block position-relative me-md-6 mb-6 mb-md-0"><img class="rounded-circle" style="width: 60px; height: 60px;" src="wrexa-assets/images/avatar-male2.png" alt=""/><img class="position-absolute bottom-0 end-0 me-n1 mb-n1 img-fluid" src="wrexa-assets/elements/spotify-logo-small-icon.svg" alt=""/></div>
        <div class="d-flex mb-6 mb-md-0 align-items-center">
          <h5 class="fw-bold text-white mb-0" >Elon A.Soersen</h5>
          <div class="ms-4 me-md-16 ps-4 border-start border-secondary d-inline-block"><span class="text-secondary" >Miro, Head of Design</span></div>
        </div>
        <svg width="130" height="22" viewbox="0 0 130 22" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22 8.70801H13.6583L11 0.458008L8.34166 8.70801H0L6.80168 13.548L4.19835 21.5414L11 16.5913L17.8017 21.5414L15.1983 13.548L22 8.70801Z" fill="white"></path>
          <path d="M49 8.70801H40.6583L38 0.458008L35.3417 8.70801H27L33.8017 13.548L31.1984 21.5414L38 16.5913L44.8017 21.5414L42.1983 13.548L49 8.70801Z" fill="white"></path>
          <path d="M76 8.70801H67.6583L65 0.458008L62.3417 8.70801H54L60.8017 13.548L58.1984 21.5414L65 16.5913L71.8017 21.5414L69.1983 13.548L76 8.70801Z" fill="white"></path>
          <path d="M103 8.70801H94.6583L92 0.458008L89.3417 8.70801H81L87.8017 13.548L85.1984 21.5414L92 16.5913L98.8017 21.5414L96.1983 13.548L103 8.70801Z" fill="white"></path>
          <path d="M130 8.70801H121.658L119 0.458008L116.342 8.70801H108L114.802 13.548L112.198 21.5414L119 16.5913L125.802 21.5414L123.198 13.548L130 8.70801Z" fill="white"></path>
        </svg>
      </div>
    </div>
  </div>
</section>