<section class="mx-auto my-4 max-w-[var(--container-width)] p-2 text-gray-900 [--container-width:1280px] dark:text-gray-200">
  <h2 class="mb-12 text-center text-4xl font-bold tracking-tight dark:text-zinc-50">Trust the words of customers</h2>
  <div class="columns-1 space-y-4 md:columns-2 lg:columns-3">
    <!-- TESTIMONIAL-1 -->
    <div class="grid break-inside-avoid gap-5 rounded-xl bg-gray-100 p-7 dark:bg-zinc-900">
      <q>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit provident natus sit illum? Ea, assumenda! Aperiam doloribus aliquam
        quaerat mollitia.
      </q>
      <div class="flex items-center gap-3">
        <img
          class="aspect-square w-12 shrink-0 rounded-full object-cover"
          src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=50&h=50&dpr=2"
          alt="Profile picture" />
        <div>
          <p class="font-bold">John Doe</p>
          <span class="mt-auto text-xs font-semibold text-gray-600 dark:text-gray-200">CEO of tech</span>
        </div>
      </div>
    </div>
    <!-- TESTIMONIAL-2 -->
    <div class="grid break-inside-avoid gap-5 rounded-xl bg-gray-100 p-7 dark:bg-zinc-900">
      <q>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit provident natus sit illum? Ea, assumenda! Aperiam doloribus aliquam
        quaerat mollitia.dipisicing elit.
      </q>
      <div class="flex items-center gap-3">
        <img
          class="aspect-square w-12 shrink-0 rounded-full object-cover"
          src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=100"
          alt="Profile picture" />
        <div>
          <p class="font-bold">Connie tucker</p>
          <span class="mt-auto text-xs font-semibold text-gray-600 dark:text-gray-200">CEO of ILM</span>
        </div>
      </div>
    </div>
    <!-- TESTIMONIAL-3 -->
    <div class="grid break-inside-avoid gap-5 rounded-xl bg-gray-100 p-7 dark:bg-zinc-900">
      <q>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit provident natus sit illum? Ea, assumenda! Aperiam doloribus aliquam
        quaerat mollitia.
      </q>
      <div class="flex items-center gap-3">
        <img
          class="aspect-square w-12 shrink-0 rounded-full object-cover"
          src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=100"
          alt="Profile picture" />
        <div>
          <p class="font-bold">Elisa</p>
          <span class="mt-auto text-xs font-semibold text-gray-600 dark:text-gray-200">CEO of MS</span>
        </div>
      </div>
    </div>
    <!-- TESTIMONIAL-4 -->
    <div class="grid break-inside-avoid gap-5 rounded-xl bg-gray-100 p-7 dark:bg-zinc-900">
      <q>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit provident natus sit illum? Ea, assumenda! Aperiam doloribus aliquam
        quaerat mollitia.
      </q>
      <div class="flex items-center gap-3">
        <img
          class="aspect-square w-12 shrink-0 rounded-full object-cover"
          src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80"
          alt="Profile picture" />
        <div>
          <p class="font-bold">Missy</p>
          <span class="mt-auto text-xs font-semibold text-gray-600 dark:text-gray-200">CTO of COSMO</span>
        </div>
      </div>
    </div>
    <!-- TESTIMONIAL-5 -->
    <div class="grid break-inside-avoid gap-5 rounded-xl bg-gray-100 p-7 dark:bg-zinc-900">
      <q> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit provident natus sit illum? Ea, assumenda! </q>
      <div class="flex items-center gap-3">
        <img
          class="aspect-square w-12 shrink-0 rounded-full object-cover"
          src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=50&h=50&dpr=2"
          alt="Profile picture" />
        <div>
          <p class="font-bold">John Doe</p>
          <span class="mt-auto text-xs font-semibold text-gray-600 dark:text-gray-200">CEO of tech</span>
        </div>
      </div>
    </div>
    <!-- TESTIMONIAL-6 -->
    <div class="grid break-inside-avoid gap-5 rounded-xl bg-gray-100 p-7 dark:bg-zinc-900">
      <q>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit provident natus sit illum? Ea, assumenda! Aperiam doloribus aliquam
        quaerat mollitia.
      </q>
      <div class="flex items-center gap-3">
        <img
          class="aspect-square w-12 shrink-0 rounded-full object-cover"
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=100"
          alt="Profile picture" />
        <div>
          <p class="font-bold">Elena Smith</p>
          <span class="mt-auto text-xs font-semibold text-gray-600 dark:text-gray-200">CEO of tech</span>
        </div>
      </div>
    </div>
    <!-- TESTIMONIAL-4 -->
    <div class="grid break-inside-avoid gap-5 rounded-xl bg-gray-100 p-7 dark:bg-zinc-900">
      <q>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit provident natus sit illum? Ea, assumenda! Aperiam doloribus aliquam
        quaerat mollitia.
      </q>
      <div class="flex items-center gap-3">
        <img
          class="aspect-square w-12 shrink-0 rounded-full object-cover"
          src="https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fG1lbiUyMHBvcnRyYWl0fGVufDB8MXwwfHx8MA%3D%3D&auto=format&fit=crop&w=100&q=60"
          alt="Profile picture" />
        <div>
          <p class="font-bold">Daniel</p>
          <span class="mt-auto text-xs font-semibold text-gray-600 dark:text-gray-200">CTO of DNA</span>
        </div>
      </div>
    </div>
    <!-- TESTIMONIAL-5 -->
    <div class="grid break-inside-avoid gap-5 rounded-xl bg-gray-100 p-7 dark:bg-zinc-900">
      <q> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit provident natus sit illum? Ea, assumenda! </q>
      <div class="flex items-center gap-3">
        <img
          class="aspect-square w-12 shrink-0 rounded-full object-cover"
          src="https://images.unsplash.com/photo-1507081323647-4d250478b919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fG1lbiUyMHBvcnRyYWl0fGVufDB8MXwwfHx8MA%3D%3D&auto=format&fit=crop&w=100&q=60"
          alt="Profile picture" />
        <div>
          <p class="font-bold">Magneto</p>
          <span class="mt-auto text-xs font-semibold text-gray-600 dark:text-gray-200">CTO of X-MEN</span>
        </div>
      </div>
    </div>
    <!-- TESTIMONIAL-6 -->
    <div class="grid break-inside-avoid gap-5 rounded-xl bg-gray-100 p-7 dark:bg-zinc-900">
      <q>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit provident natus sit illum? Ea, assumenda! Aperiam doloribus aliquam
        quaerat mollitia.
      </q>
      <div class="flex items-center gap-3">
        <img
          class="aspect-square w-12 shrink-0 rounded-full object-cover"
          src="https://images.pexels.com/photos/4429279/pexels-photo-4429279.jpeg?auto=compress&cs=tinysrgb&w=100"
          alt="Profile picture" />
        <div>
          <p class="font-bold">Jenny</p>
          <span class="mt-auto text-xs font-semibold text-gray-600 dark:text-gray-200">Director at MGH</span>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="mx-3 my-[calc(var(--image-width)/2+3px)] grid max-w-md justify-center gap-7 rounded-lg bg-white px-6 text-center text-gray-800 shadow-[0_0_10px_1px_rgba(200,200,200,0.3)] [--image-width:4rem] dark:bg-zinc-900 dark:text-gray-50 dark:shadow-none">
  <div>
    <img class="mx-auto aspect-square w-[var(--image-width)] -translate-y-1/2 rounded-full object-cover"
      src="https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fG1lbiUyMHBvcnRyYWl0fGVufDB8MXwwfHx8MA%3D%3D&auto=format&fit=crop&w=100&q=60"
      alt="Profile picture" />
  </div>
  <q class="-mt-[calc(var(--image-width)/2)]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ea ullam non adipisci minus! Sequi architecto magnam amet pariatur quaerat.</q>
  <div class="border-t border-gray-200 py-4 dark:border-zinc-800">
    <div class="text-2xl font-medium">Sam Curry</div>
    <p class="mx-auto max-w-[80%] text-xs">Senior Engineer at DUpe</p>
  </div>
</div>