Testimonials User Using Tailwind UI

The Testimonial UI Section is a visually appealing component made with Tailwind CSS. It elegantly showcases testimonials and feedback from satisfied users, clients, or customers, instilling credibility and trust in the featured product or service.
section
Loading component...
index.html
93 lines
<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>

<h1 class="text-center font-bold pt-10 text-3xl mb-16">Testimonials component</h1>
<div class="container items-center px-4 py-8 m-auto mt-5">
  <div class="flex flex-wrap w-full md:max-w-7xl lg:max-w-5xl mx-auto">

    <div class="w-full p-2 md:w-1/2 my-8">
      <div class="relative">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
          class="w-24 h-24 text-blue-600 absolute -top-12 left-12">
          <path
            d="M4.58341 17.3211C3.55316 16.2275 3 15 3 13.0104C3 9.51092 5.45651 6.37372 9.03059 4.82324L9.92328 6.20085C6.58804 8.00545 5.93618 10.3461 5.67564 11.8221C6.21263 11.5444 6.91558 11.4467 7.60471 11.5106C9.40908 11.6778 10.8312 13.1591 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0096 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2275 13 15 13 13.0104C13 9.51092 15.4565 6.37372 19.0306 4.82324L19.9233 6.20085C16.588 8.00545 15.9362 10.3461 15.6756 11.8221C16.2126 11.5444 16.9156 11.4467 17.6047 11.5106C19.4091 11.6778 20.8312 13.1591 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0096 14.5834 17.3211Z">
          </path>
        </svg>
        <img class="w-20 h-20 rounded-lg object-cover absolute -top-16 right-12 mt-4 mr-4"
          src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=466&q=80"
          alt="Avatar">
        <div
          class="p-12 flex-col w-full text-center items-center overflow-hidden sm:w-11/12 md:max-w-2xl bg-gray-100">

          <p class="mb-6 text-sm font-medium text-gray-500">
            "Ever since incorporating the comprehensive web task management system into our daily operations, our
            team's productivity, organization, and seamless collaboration have reached unprecedented heights, paving
            the way for remarkable success and efficiency in all our endeavors."
          </p>
          <h1 class="text-sm md:text-base font-extrabold text-gray-700 uppercase">William Taylor, CTO / Watch Co.</h1>
        </div>
      </div>
    </div>

    <div class="w-full p-2 md:w-1/2 my-8">
      <div class="relative">
        <img class="w-20 h-20 rounded-lg object-cover absolute -bottom-12 right-16"
          src="https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
          alt="Avatar">
        <div
          class="p-12 flex-col w-full text-center items-center overflow-hidden sm:w-11/12 md:max-w-2xl bg-blue-600">

          <p class="mb-9 text-2xl md:text-3xl font-medium text-white">
            I am extremely satisfied with the task management service!
          </p>
          <h1 class="text-sm md:text-base font-extrabold text-white uppercase">Michael Jones, COO / CyberDefenders</h1>
        </div>
      </div>
    </div>

    <div class="w-full p-2 md:w-1/2 my-8">
      <div class="relative">
        <img class="w-20 h-20 rounded-lg object-cover absolute -bottom-12 left-12 mt-4 mr-4"
          src="https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
          alt="Avatar">
        <div
          class="p-12 flex-col w-full text-center items-center overflow-hidden sm:w-11/12 md:max-w-2xl bg-blue-600">

          <p class="mb-4 text-base md:text-lg font-medium text-white">
            "Outstanding web task management service, highly streamlined my workflow."
          </p>
          <h1 class="text-sm md:text-base font-extrabold text-white uppercase">Sarah Brown, CEO / EcoRide</h1>
        </div>
      </div>
    </div>

    <div class="w-full p-2 md:w-1/2 my-8">
      <div class="relative">
        <img class="w-20 h-20 rounded-lg object-cover absolute -top-16 left-12 mt-4 mr-4"
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
          alt="Avatar">
        <div
          class="p-12 flex-col w-full text-center items-center overflow-hidden sm:w-11/12 md:max-w-2xl bg-gray-100">

          <p class="mb-4 text-base md:text-lg font-medium text-gray-500">
            "Web task management: exceptional workflow efficiency."
          </p>
          <h1 class="text-sm md:text-base font-extrabold uppercase text-gray-700">Jessica Martinez, CTO / S&B
          </h1>
        </div>
      </div>
    </div>



  </div>
</div>
Testimonials User Using Tailwind UI

Preview - Testimonials User Using Tailwind UI
