Testimonials Customers Using Tailwind UI

<!-- Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/16364815-Testimonials -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
</style>

<section class="flex items-center justify-center w-screen h-screen px-8 sm:px-0 bg-[#EDEFF8]">
  <div class="container max-w-xl mx-auto bg-white rounded-xl">
    <div class="flex flex-col items-center w-full p-6 rounded-md lg:h-full lg:p-8 dark:bg-gray-900 dark:text-gray-100">
      <div class="mb-8 text-center">
        <h1 class="text-2xl font-bold">A word from our customers</h1>
        <p class="text-sm text-gray-500">We'he been helping businesses do their best since 2000</p>
      </div>
      <div class="flex items-center justify-center space-x-4">
        <span class="p-2 border border-gray-500 rounded-full cursor-pointer hover:bg-gray-900 group">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6 stroke-current group-hover:stroke-white">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
          </svg>
        </span>
        <div class="flex flex-col items-center mb-4">
          <span
            class="relative p-3 text-sm font-medium leading-relaxed text-center whitespace-no-wrap bg-gray-900 rounded-xl text-gray-50">
            Both attractive and highly adaptable. Buy this now. Thank you for making it painless,
            pleasant
            and most of all hassle free!
          </span>
          <div class="w-4 h-4 -mt-2 rotate-45 bg-gray-900"></div>
        </div>
        <span class="p-2 border border-gray-500 rounded-full cursor-pointer hover:bg-gray-900 group ">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6 stroke-current group-hover:stroke-white">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
          </svg>

        </span>
      </div>
      <img
        src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
        alt="" class="object-cover w-16 h-16 mb-4 rounded-full dark:bg-gray-500">
      <div class="mb-8 text-center">
        <p class="text-base font-semibold">Lea Jenkins</p>
        <p class="text-xs font-medium text-gray-500">Founders & CEO of Company Co.</p>
      </div>
      <div class="flex space-x-2">
        <button type="button" aria-label="Page 4" class="w-2 h-2 bg-gray-600 rounded-full"></button>
        <button type="button" aria-label="Page 1" class="w-2 h-2 bg-white border border-gray-500 rounded-full"></button>
        <button type="button" aria-label="Page 1" class="w-2 h-2 bg-white border border-gray-500 rounded-full"></button>
      </div>
    </div>
  </div>
</section>