---
sidebar_position: 2
---

# Card Testimonial

![Cards](/img/card-testimonial.png)

```jsx title="Frontend/sections/Testimonials/CardTestimonial.tsx"
<>
      {/* Testimonials */}
      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        {/* Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
          {/* Card */}
          <div className="flex flex-col bg-base-100 /40  shadow-sm rounded-xl  ">
            <div className="flex-auto p-4 md:p-6">
              <Image
                width="500"
                height="500"
                className="h-9 w-9 rounded-full"
                src={
                  "https://pbs.twimg.com/profile_images/1432517677864607745/spXCJfPY_400x400.jpg"
                }
                alt={"Timmy"}
              />
              <p className="mt-3 sm:mt-6 text-base text-base-content md:text-xl ">
                <em>I think its a good idea</em>
              </p>
            </div>
            <div className="p-4 rounded-b-xl md:px-6">
              <h3 className="text-sm font-semibold text-base-content sm:text-base ">
                Mustafa Hanif
              </h3>
              <p className="text-sm text-base-content/80">Indie Hacker</p>
            </div>
          </div>
          {/* End Card */}
          {/* Card */}
          <div className="flex flex-col bg-base-100 border border-primary/40  shadow-sm rounded-xl  ">
            <div className="flex-auto p-4 md:p-6">
              <Image
                width="500"
                height="500"
                className="h-9 w-9 rounded-full"
                src={
                  "https://pbs.twimg.com/profile_images/1647540692837597184/SyEB8Ehg_400x400.jpg"
                }
                alt={"Timmy"}
              />
              <p className="mt-3 sm:mt-6 text-base text-base-content md:text-xl ">
                <em>I know it&apos;s worth it and very good</em>
              </p>
            </div>
            <div className="p-4 rounded-b-xl md:px-6">
              <h3 className="text-sm font-semibold text-base-content sm:text-base ">
                Timmy D Turner
              </h3>
              <p className="text-sm text-base-content/80">Indie Hacker</p>
            </div>
          </div>
          {/* End Card */}
        </div>
        {/* End Grid */}
      </div>
      {/* End Testimonials */}
    </>
```