Skip to content
HyperUI

No results found.

Back to marketing components

Testimonials

Testimonial and customer review components built with Tailwind CSS. Pull quotes, quote grids, and star-rated reviews for landing pages, about pages, and product pages.

0/3 Dark Mode (Request)Updated: N/ANo commit information available.

Single quote, centered

markmead

<figure class="mx-auto max-w-2xl text-center">
  <svg
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    class="mx-auto size-8 text-indigo-600"
  >
    <path
      d="M7.17 6.17A5.5 5.5 0 0 0 3 11.5V18a1 1 0 0 0 1 1h6.5a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H6.06a3.5 3.5 0 0 1 2.35-2.79 1 1 0 1 0-.62-1.9Zm10 0A5.5 5.5 0 0 0 13 11.5V18a1 1 0 0 0 1 1h6.5a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-4.44a3.5 3.5 0 0 1 2.35-2.79 1 1 0 1 0-.62-1.9Z"
    />
  </svg>

  <blockquote class="mt-4">
    <p class="text-xl font-medium text-pretty text-gray-900 sm:text-2xl">
      We moved our entire onboarding flow over in an afternoon. Support tickets about &ldquo;how
      do I find X&rdquo; dropped by half in the first week.
    </p>
  </blockquote>

  <figcaption class="mt-6 flex items-center justify-center gap-3">
    <img
      alt=""
      src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&q=80&w=200"
      class="size-10 rounded-full object-cover"
    />

    <div class="text-left ltr:text-left rtl:text-right">
      <p class="text-sm font-medium text-gray-900">Dana Whitfield</p>
      <p class="text-sm text-gray-500">Head of Support, Loopline</p>
    </div>
  </figcaption>
</figure>

Grid of quotes, 3-up

markmead

<ul class="mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <li class="flex flex-col rounded-lg border border-gray-200 p-6">
    <blockquote class="flex-1 text-sm text-gray-700">
      &ldquo;Setup took less time than the coffee I made while doing it. The defaults are
      genuinely good, which is rare.&rdquo;
    </blockquote>

    <div class="mt-6 flex items-center gap-3">
      <img
        alt=""
        src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=200"
        class="size-9 rounded-full object-cover"
      />

      <div>
        <p class="text-sm font-medium text-gray-900">Marcus Boyle</p>
        <p class="text-xs text-gray-500">Founder, Northwind Studio</p>
      </div>
    </div>
  </li>

  <li class="flex flex-col rounded-lg border border-gray-200 p-6">
    <blockquote class="flex-1 text-sm text-gray-700">
      &ldquo;We tried three other tools before this one. It's the only one the whole team still
      opens without being reminded to.&rdquo;
    </blockquote>

    <div class="mt-6 flex items-center gap-3">
      <img
        alt=""
        src="https://images.unsplash.com/photo-1601412436009-d964bd02edbc?auto=format&fit=crop&q=80&w=200"
        class="size-9 rounded-full object-cover"
      />

      <div>
        <p class="text-sm font-medium text-gray-900">Priya Natarajan</p>
        <p class="text-xs text-gray-500">Ops Lead, Orbitly</p>
      </div>
    </div>
  </li>

  <li class="flex flex-col rounded-lg border border-gray-200 p-6">
    <blockquote class="flex-1 text-sm text-gray-700">
      &ldquo;Migrating five years of data usually breaks something. Nothing broke. That's the
      whole review.&rdquo;
    </blockquote>

    <div class="mt-6 flex items-center gap-3">
      <img
        alt=""
        src="https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=200"
        class="size-9 rounded-full object-cover"
      />

      <div>
        <p class="text-sm font-medium text-gray-900">Kwame Asante</p>
        <p class="text-xs text-gray-500">CTO, Fieldnote</p>
      </div>
    </div>
  </li>
</ul>

Reviews with star rating

markmead

<ul class="mx-auto max-w-2xl space-y-4">
  <li class="rounded-lg border border-gray-200 p-6">
    <div class="flex items-center justify-between gap-4">
      <div class="flex items-center gap-0.5 text-amber-500">
        <span class="sr-only">Rated 4 out of 5 stars</span>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4 text-gray-200"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
      </div>

      <span class="inline-flex items-center gap-1 text-xs font-medium text-emerald-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-3.5"
        >
          <path
            fill-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
            clip-rule="evenodd"
          />
        </svg>
        Verified purchase
      </span>
    </div>

    <p class="mt-3 text-sm font-medium text-gray-900">Kept us dry through a week of rain</p>

    <p class="mt-1 text-sm text-gray-600">
      Pitched this in a downpour at 6,000ft and stayed dry all night. Poles are colour-coded so
      it went up in under four minutes even in the wind.
    </p>

    <p class="mt-3 text-xs text-gray-500">Freya Lindqvist &middot; 3 weeks ago</p>
  </li>

  <li class="rounded-lg border border-gray-200 p-6">
    <div class="flex items-center justify-between gap-4">
      <div class="flex items-center gap-0.5 text-amber-500">
        <span class="sr-only">Rated 3 out of 5 stars</span>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4 text-gray-200"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="size-4 text-gray-200"
        >
          <path
            d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L10 14.9l-5.2 2.62.99-5.8-4.21-4.1 5.82-.85z"
          />
        </svg>
      </div>
    </div>

    <p class="mt-3 text-sm font-medium text-gray-900">Good pack, straps run narrow</p>

    <p class="mt-1 text-sm text-gray-600">
      Compression straps and the hip belt are excellent, but the shoulder straps dug in on
      longer days. Sizing up helped.
    </p>

    <p class="mt-3 text-xs text-gray-500">Owen Baptiste &middot; 2 months ago</p>
  </li>
</ul>
View all marketing components