Testimonials Design

Discover creative testimonials design ideas to showcase customer feedback effectively, build trust, and enhance your website’s appeal.

Testimonials Design with Statics

Preview

Coolest UI Design

I visited the website. A lot of free components provided by you. It’s very cool and helps us in our website for fast development.

Amazing people to work with. Very fast and professional partner.

Jully Zezz
CTO of zepto

9000+
Daily Users
40%
Increase in traffic on webpages
9.3%
Organic traffic
2x
Faster than previous versions

Show Code

<div class="max-w-7xl px-4 py-10 mx-auto">
    <div class="lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center lg:justify-between">
        <div class="lg:col-span-5 lg:col-start-1">
            <div class="mb-8">
                <h2 class="mb-2 text-3xl text-gray-800 font-bold lg:text-4xl">
                    Coolest UI Design
                </h2>
                <p class="text-gray-600">
                    I visited the website. A lot of free components provided by you. It's very cool and helps us in our website for fast development.
                </p>
            </div>
            <blockquote class="relative">
                <svg class="absolute top-0 start-0 transform -translate-x-6 -translate-y-8 size-16 text-gray-200" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path
                        d="M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z"
                        fill="currentColor"
                    />
                </svg>

                <div class="relative z-10">
                    <p class="text-xl italic text-gray-800">
                        Amazing people to work with. Very fast and professional partner.
                    </p>
                </div>

                <div class="flex items-center mt-6 gap-x-2">
                    <div class="shrink-0">
                        <img class="size-12 rounded-full" src="https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="Testimonials Design" />
                    </div>
                    <div class="grow">
                        <div class="font-semibold">Jully Zezz</div>
                        <div class="text-xs text-gray-500">CTO of zepto</div>
                    </div>
                </div>
            </blockquote>
        </div>

        <div class="mt-10 lg:mt-0 lg:col-span-6 lg:col-end-13">
            <div class="space-y-6 sm:space-y-8">
                <ul class="grid grid-cols-2 divide-y divide-x divide-gray-200 overflow-hidden">
                    <li class="flex flex-col -m-0.5 p-4 sm:p-8">
                        <div class="flex items-end gap-x-2 text-3xl sm:text-5xl font-bold text-gray-800 mb-2">
                            9000+
                        </div>
                        <p class="text-sm sm:text-base text-gray-600">
                            Daily Users
                        </p>
                    </li>

                    <li class="flex flex-col -m-0.5 p-4 sm:p-8">
                        <div class="flex items-end gap-x-4 text-3xl sm:text-5xl font-bold text-gray-800 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#85A98F" viewBox="0 0 256 256">
                                <path
                                    d="M240,56v64a8,8,0,0,1-16,0V75.31l-82.34,82.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,212.69,64H168a8,8,0,0,1,0-16h64A8,8,0,0,1,240,56Z"
                                ></path>
                            </svg>
                            40%
                        </div>
                        <p class="text-sm sm:text-base text-gray-600">
                            Increase in traffic on webpages
                        </p>
                    </li>

                    <li class="flex flex-col -m-0.5 p-4 sm:p-8">
                        <div class="flex items-end gap-x-4 text-3xl sm:text-5xl font-bold text-gray-800 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#85A98F" viewBox="0 0 256 256">
                                <path
                                    d="M240,56v64a8,8,0,0,1-16,0V75.31l-82.34,82.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,212.69,64H168a8,8,0,0,1,0-16h64A8,8,0,0,1,240,56Z"
                                ></path>
                            </svg>
                            9.3%
                        </div>
                        <p class="text-sm sm:text-base text-gray-600">
                            Organic traffic
                        </p>
                    </li>

                    <li class="flex flex-col -m-0.5 p-4 sm:p-8">
                        <div class="flex items-end gap-x-2 text-3xl sm:text-5xl font-bold text-gray-800 mb-2">
                            2x
                        </div>
                        <p class="text-sm sm:text-base text-gray-600">
                            Faster than previous versions
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Testimonials Design with gradient background color

Preview

Jons, CEO at LinkedIn

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus aperiam iusto dignissimos eligendi, beatae sunt consectetur eius in molestias exercitationem inventore adipisci alias ab eveniet nulla vitae error itaque deserunt.

Show Code

<div class="bg-gradient-to-r from-cyan-900 to-black">
    <div class="max-w-7xl px-4 py-12 lg:py-24 mx-auto">
        <div class="mb-6 flex items-center gap-x-2">
            <img
                class="size-10 rounded-full ls-is-cached lazyloaded"
                src="https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img/https://designcools.com/wp-content/uploads/2024/11/lady.jpeg"
                alt="Testimonials Design"
            />
            <span class="md:text-lg font-bold text-lime-400">Jons,</span> <span class="text-neutral-300">CEO at LinkedIn</span>
        </div>

        <p class="text-xl sm:text-2xl md:text-3xl md:leading-normal text-white">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus aperiam iusto dignissimos eligendi, beatae sunt consectetur eius in molestias exercitationem inventore adipisci alias ab eveniet nulla vitae error itaque
            deserunt.
        </p>

        <div class="mt-10">
            <button aria-label="play-icon" type="button" class="group inline-flex items-center gap-x-2 text-neutral-300 text-sm">
                <span class="size-8 md:size-10 flex flex-col justify-center items-center text-black rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" viewBox="0 0 256 256">
                        <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm40.55,110.58-52,36A8,8,0,0,1,104,164V92a8,8,0,0,1,12.55-6.58l52,36a8,8,0,0,1,0,13.16Z"></path>
                    </svg>
                </span>
                Watch the Video
            </button>
        </div>
    </div>
</div>

Testimonials Design with Rating

Preview

“Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus aperiam iusto dignissimos eligendi, beatae sunt consectetur eius in molestias exercitationem inventore adipisci alias ab eveniet nulla vitae error itaque deserunt”.

Charlis Angel, CEO of Workation

Show Code

<div class="">
    <div class="max-w-3xl px-4 py-12 lg:py-24 mx-auto">
        <div class="flex items-center gap-x-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5A6C57" viewBox="0 0 256 256">
                <path
                    d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"
                ></path>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5A6C57" viewBox="0 0 256 256">
                <path
                    d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"
                ></path>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5A6C57" viewBox="0 0 256 256">
                <path
                    d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"
                ></path>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5A6C57" viewBox="0 0 256 256">
                <path
                    d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"
                ></path>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5A6C57" viewBox="0 0 256 256">
                <path
                    d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"
                ></path>
            </svg>
        </div>
        <p class="text-xl sm:text-2xl mt-10">
            "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus aperiam iusto dignissimos eligendi, beatae sunt consectetur eius in molestias exercitationem inventore adipisci alias ab eveniet nulla vitae error itaque
            deserunt".
        </p>
        <div class="mt-10 flex flex-col sm:flex-row gap-y-1 items-center gap-x-2">
            <img class="size-14 sm:mr-3 rounded-full ls-is-cached lazyloaded" src="https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img/https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="Testimonials section Design" />
            <span class="md:text-lg font-bold text-[#5A6C57]">Charlis Angel,</span> <span class="text-gray-600">CEO of Workation</span>
        </div>
    </div>
</div>

Testimonials Design: Side by Side view

Preview

Charlis Angel

CEO of Workation

Charlis Angel

CEO of Workation

Show Code

<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="grid sm:divide-x divide-y sm:divide-y-0 grid-cols-1 md:grid-cols-2">
        <div class="pb-12 sm:pb-0 sm:pr-12">
            <div>
                <svg class="text-gray-500 h-10" viewBox="0 0 512 149" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M.06 27.679h17.852v39.662h37.651V27.679h17.875v97.358H55.563V84.542H17.912v40.495H.06V27.679zM129.993 93.326c0 8.15-6.64 14.782-14.788 14.782-8.151 0-14.787-6.632-14.787-14.782V51.41h-16.93v41.916c0 17.487 14.229 31.711 31.717 31.711 17.484 0 31.712-14.224 31.712-31.711V51.41h-16.924v41.916M194.179 51.901c-8.398 0-14.26 2.437-19.921 7.994V27.679h-16.985v59.705c0 22.348 16.158 37.653 34.311 37.653 20.181 0 37.863-15.578 37.863-36.567 0-20.723-16.305-36.569-35.268-36.569zm.422 57.423c-11.509 0-20.31-9.612-20.31-20.854 0-11.244 8.801-20.859 20.31-20.859 9.752 0 18.558 9.615 18.558 20.859 0 11.242-8.806 20.854-18.558 20.854zM257.974 56.18c0-8.538 5.689-11.245 11.917-11.245 5.014 0 11.649 3.792 15.979 8.398l11.103-13.001c-5.549-7.448-16.788-12.596-25.998-12.596-18.421 0-31.694 10.7-31.694 28.444 0 32.91 40.497 22.478 40.497 40.902 0 5.682-5.551 10.698-11.913 10.698-10.026 0-13.278-4.876-17.881-10.024l-12.327 12.729c7.86 9.617 17.608 14.495 29.257 14.495 17.47 0 31.556-10.835 31.556-27.767 0-36.566-40.496-25.188-40.496-41.033M343.184 50.947c-18.151 0-34.311 15.296-34.311 37.649v59.859h16.984v-32.369c5.662 5.553 11.521 7.994 19.922 7.994 18.962 0 35.269-15.844 35.269-36.567 0-20.992-17.687-36.566-37.864-36.566zm3.018 57.425c-11.508 0-20.31-9.625-20.31-20.859 0-11.244 8.802-20.859 20.31-20.859 9.75 0 18.557 9.615 18.557 20.859 0 11.234-8.807 20.859-18.557 20.859zM506.069 109.324c-10.018 0-12.862-4.332-12.862-10.971V68.965h15.572V54.069h-15.572v-19.64l-17.195 7.718v59.863c0 15.306 10.56 23.027 25.045 23.027 2.167 0 5.15-.14 6.777-.541l4.199-15.438c-1.896.131-4.062.266-5.964.266"
                        fill="currentColor"
                    ></path>
                    <path
                        d="M461.278 69.831c-3.256-5.602-7.836-10.093-13.562-13.474-4.279-2.491-8.716-4.072-13.716-4.751v-17.8c5-2.123 8.103-6.822 8.103-12.304 0-7.472-5.992-13.527-13.458-13.527-7.472 0-13.569 6.055-13.569 13.527 0 5.482 2.924 10.181 7.924 12.304v17.808c-4 .578-8.148 1.825-11.936 3.741-7.737-5.876-33.107-25.153-47.948-36.412.352-1.269.623-2.577.623-3.957 0-8.276-6.702-14.984-14.981-14.984S333.78 6.71 333.78 14.986c0 8.275 6.706 14.985 14.985 14.985 2.824 0 5.436-.826 7.69-2.184l3.132 2.376 43.036 31.008c-2.275 2.089-4.394 4.465-6.089 7.131C393.099 73.737 391 79.717 391 86.24v1.361c0 4.579.87 8.902 2.352 12.963 1.305 3.546 3.213 6.77 5.576 9.685l-14.283 14.318a11.501 11.501 0 0 0-12.166 2.668 11.499 11.499 0 0 0-3.388 8.19c.001 3.093 1.206 6 3.394 8.187a11.5 11.5 0 0 0 8.188 3.394 11.51 11.51 0 0 0 8.191-3.394 11.514 11.514 0 0 0 3.39-8.187c0-1.197-.185-2.365-.533-3.475l14.763-14.765c2.024 1.398 4.21 2.575 6.56 3.59 4.635 2.004 9.751 3.225 15.35 3.225h1.026c6.19 0 12.029-1.454 17.518-4.428 5.784-3.143 10.311-7.441 13.731-12.928 3.438-5.502 5.331-11.581 5.331-18.269v-.334c0-6.579-1.523-12.649-4.722-18.21zm-18.038 30.973c-4.007 4.453-8.613 7.196-13.82 7.196h-.858c-2.974 0-5.883-.822-8.731-2.317-3.21-1.646-5.65-3.994-7.647-6.967-2.064-2.918-3.184-6.104-3.184-9.482v-1.026c0-3.321.637-6.47 2.243-9.444 1.717-3.251 4.036-5.779 7.12-7.789 3.028-1.996 6.262-2.975 9.864-2.975h.335c3.266 0 6.358.644 9.276 2.137 2.973 1.592 5.402 3.767 7.285 6.628 1.829 2.862 2.917 5.949 3.267 9.312.055.699.083 1.415.083 2.099 0 4.564-1.744 8.791-5.233 12.628z"
                        fill="currentColor"
                    ></path>
                </svg>
            </div>
            <p class="text-xl sm:text-2xl mt-10">
                "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus aperiam iusto dignissimos eligendi, beatae sunt consectetur eius in molestias exercitationem inventore adipisci alias ab eveniet nulla vitae error itaque
                deserunt".
            </p>
            <div class="mt-10 flex gap-y-1 items-center gap-x-4">
                <img class="size-14 rounded-full ls-is-cached lazyloaded" src="https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img/https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="Testimonials section Design" />
                <div>
                    <p class="md:text-lg font-bold text-[#5A6C57]">Charlis Angel</p>
                    <p class="text-gray-600">CEO of Workation</p>
                </div>
            </div>
        </div>
        <div class="pt-12 sm:pt-0 sm:pl-12">
            <div>
                <svg class="h-10 text-gray-500" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 33">
                    <path d="M9.3 16.5C9.3 9 14.3 2.7 21.2.7a16.5 16.5 0 1 0 0 31.6c-6.9-2-11.9-8.3-11.9-15.8Z" fill="currentColor"></path>
                    <path d="M21.7 10c4 0 7.4 2.8 8.5 6.4a8.9 8.9 0 1 0-17 0c1-3.6 4.4-6.3 8.5-6.3Z" fill="currentColor"></path>
                    <path d="M24.8 19.4c0 3-2 5.5-4.8 6.3A6.6 6.6 0 1 0 20 13c2.8.8 4.8 3.4 4.8 6.4Z" fill="currentColor"></path>
                    <path
                        d="M39.6 13.5A4.4 4.4 0 0 1 44 9.1h1.3v2.7l-1 .2-1 .6-.2.4-.1.5h2.3v3H43v9.2h-3.4v-9.3h-1.3v-2.9h1.3ZM55.7 13.5h3.4v6.1a6.9 6.9 0 0 1-1.7 4.6 6 6 0 0 1-4.5 1.8c-1 0-1.8-.1-2.5-.5a6 6 0 0 1-3.2-3.4c-.3-.8-.4-1.6-.4-2.5v-6H50v6c0 .5 0 1 .2 1.3l.5 1c.2.4.5.6.9.8.3.2.8.3 1.2.3a2.6 2.6 0 0 0 2.1-1c.3-.3.4-.7.5-1l.2-1.4v-6ZM61.2 25.7V9.5h3.4v16.2h-3.4ZM66.9 25.7V9.5h3.3v16.2H67ZM78.5 21.2l3.3-7.7h3.7l-5.7 12.2h-2.7l-5.6-12.2H75l3.4 7.7ZM87 13.5h3.3v12.2H87V13.5Zm1.6-5 .8.1.6.4.4.7.2.7a1.9 1.9 0 0 1-.6 1.4l-.6.4a2 2 0 0 1-.8.1c-.5 0-1-.2-1.3-.5a2 2 0 0 1-.4-2.1c0-.3.2-.5.4-.7l.6-.4.7-.1ZM98.8 13.2a6.7 6.7 0 0 1 4.8 1.9 6.3 6.3 0 0 1 1.9 5.7h-9.8a3.3 3.3 0 0 0 3.2 2.2c.5 0 1-.1 1.4-.4.5-.2.9-.5 1.2-1h3.7c-.2.7-.5 1.3-1 1.8a6.1 6.1 0 0 1-3.3 2.3 7 7 0 0 1-6.9-1.6 6.1 6.1 0 0 1-2-4.5 6.1 6.1 0 0 1 2-4.5c.7-.6 1.4-1 2.2-1.4.8-.3 1.7-.5 2.6-.5Zm3.2 5.2c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.3-.7-2-.7s-1.4.3-2 .7c-.5.4-.9.9-1.1 1.5h6.3ZM123 13.5h3.6l-5 12.2H119l-2.5-6.5-2.5 6.5h-2.7l-5-12.2h3.6l2.7 7 2.8-7h2.2l2.8 7 2.7-7Z"
                        fill="currentColor"
                    ></path>
                </svg>
            </div>
            <p class="text-xl sm:text-2xl mt-10">
                "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus aperiam iusto dignissimos eligendi, beatae sunt consectetur eius in molestias exercitationem inventore adipisci alias ab eveniet nulla vitae error itaque
                deserunt".
            </p>
            <div class="mt-10 flex gap-y-1 items-center gap-x-4">
                <img class="size-14 rounded-full ls-is-cached lazyloaded" src="https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img/https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="Testimonials section Design" />
                <div>
                    <p class="md:text-lg font-bold text-[#5A6C57]">Charlis Angel</p>
                    <p class="text-gray-600">CEO of Workation</p>
                </div>
            </div>
        </div>
    </div>
</div>

900+ Modern UI Design

Stay in the loop with everything you need to know.

Check Now