<section className="w-full overflow-x-hidden px-4 py-16">
  <div className="flex flex-col items-center">
    <div className="max-w-2xl space-y-4 text-center">
      <h2 className="text-4xl font-semibold">
        Voluptate commodi quas fugiat cumque corrupti
      </h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
        exercitationem ipsam similique maiores accusamus magni illo, magnam,
        eligendi nemo amet sint laborum consequatur eius. Iusto voluptatum totam
        laudantium quidem consectetur?
      </p>
    </div>
    <div
      className="mx-auto grid max-w-7xl gap-4 py-16 md:grid-cols-2 lg:grid-cols-3"
    >
      <ul className="space-y-4">
        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/men/45.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">John Smith</h6>
                <span className="font-light text-foreground/50">
                  Engineer at BuildTech
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste. Lorem ipsum
                dolor sit amet consectetur adipisicing elit. Cumque fugiat unde
                rem provident molestias facilis, mollitia eius! Eaque,
                exercitationem iste suscipit sint consectetur accusantium ea
                eveniet ratione illum corporis explicabo?
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/women/33.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">Alice Johnson</h6>
                <span className="font-light text-foreground/50">
                  Designer at CreateArt
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste.
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/men/12.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">Michael Brown</h6>
                <span className="font-light text-foreground/50">
                  Manager at OfficePro
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste. Lorem ipsum
                dolor, sit amet consectetur adipisicing elit. Magni unde,
                doloribus ipsam possimus saepe, optio natus, qui quas laborum
                velit facere quasi! Aut minus ratione tempora praesentium eos
                commodi laboriosam.
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/women/56.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">Emily Davis</h6>
                <span className="font-light text-foreground/50">
                  Marketer at PromoWorks
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste.lorem
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/men/78.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">David Wilson</h6>
                <span className="font-light text-foreground/50">
                  Developer at CodeCrafters
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste.
              </blockquote>
            </div>
          </div>
        </li>
      </ul>
      <ul className="hidden space-y-4 md:block">
        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/men/45.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">John Smith</h6>
                <span className="font-light text-foreground/50">
                  Engineer at BuildTech
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste.
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/women/33.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">Alice Johnson</h6>
                <span className="font-light text-foreground/50">
                  Designer at CreateArt
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste. Lorem ipsum
                dolor sit amet consectetur adipisicing elit. Nesciunt,
                accusantium error porro deleniti ad ullam fugit est voluptatem
                tempore, molestiae officia incidunt amet odit cumque temporibus
                dicta voluptas quam ea.
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/men/12.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">Michael Brown</h6>
                <span className="font-light text-foreground/50">
                  Manager at OfficePro
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste.
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/women/56.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">Emily Davis</h6>
                <span className="font-light text-foreground/50">
                  Marketer at PromoWorks
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste. Lorem ipsum
                dolor sit amet consectetur adipisicing elit. Labore itaque
                quaerat quod voluptate. Dolorum repellat ullam reprehenderit,
                obcaecati iusto quisquam perspiciatis error omnis, totam quas
                quibusdam dolores voluptate? Doloribus, laboriosam?
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/men/78.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">David Wilson</h6>
                <span className="font-light text-foreground/50">
                  Developer at CodeCrafters
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste. Lorem ipsum
                dolor sit amet consectetur adipisicing elit. Veniam tenetur eum
                quaerat ipsa cumque corporis placeat voluptas aperiam eos fuga
                assumenda tempora quis quo tempore, distinctio alias veritatis
                repudiandae. Dolores!
              </blockquote>
            </div>
          </div>
        </li>
      </ul>
      <ul className="hidden space-y-4 md:block">
        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/men/45.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">John Smith</h6>
                <span className="font-light text-foreground/50">
                  Engineer at BuildTech
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste. Lorem, ipsum
                dolor sit amet consectetur adipisicing elit. Temporibus maxime
                tempore tempora odit minus quibusdam porro et eum. Quia qui
                reprehenderit perferendis! Doloribus quo nemo veniam ab eius
                itaque velit!
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/women/33.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">Alice Johnson</h6>
                <span className="font-light text-foreground/50">
                  Designer at CreateArt
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste.
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/men/12.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">Michael Brown</h6>
                <span className="font-light text-foreground/50">
                  Manager at OfficePro
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste.
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/women/56.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">Emily Davis</h6>
                <span className="font-light text-foreground/50">
                  Marketer at PromoWorks
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste. Lorem ipsum
                dolor sit amet consectetur adipisicing elit. Consectetur quasi
                eius odit dolores, suscipit ad dignissimos vel maxime aliquid
                autem doloribus assumenda sint? Provident in minus quasi
                reiciendis dolorem facere.
              </blockquote>
            </div>
          </div>
        </li>

        <li>
          <div
            className="flex w-full max-w-sm flex-col rounded-lg bg-card-background/40 p-6 text-sm"
          >
            <div className="flex items-center gap-2 font-medium">
              <div>
                <img
                  height="128"
                  width="128"
                  decoding="async"
                  loading="lazy"
                  className="h-16 w-16 flex-grow rounded-full border border-foreground/10"
                  src="https://randomuser.me/api/portraits/men/78.jpg"
                  alt=""
                />
              </div>
              <div>
                <h6 className="text-lg">David Wilson</h6>
                <span className="font-light text-foreground/50">
                  Developer at CodeCrafters
                </span>
              </div>
            </div>
            <div className="mt-4">
              <blockquote className="leading-relaxed">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                impedit tempora voluptatibus autem ut voluptatum ullam minus
                cupiditate dolorem voluptates excepturi totam, vel officia
                veniam reiciendis accusamus, iure repellendus iste.
              </blockquote>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</section>
#Testimonial inspired by tailwindCSS website

#Testimonial with negative margin

#Testimonial with images without background with scale and color on hover

#Testimonial with rate

#Testimonial with cta
