Testimonials

This tailwind example is contributed by $@(\/)(\/)¥, on 04-Apr-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Card Carousel Testimonial

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

Tailwind v3.4 2.3k 8

Fork Fullscreen

<div class="w-full min-h-screen flex items-center  bg-black text-white dark:bg-gray-50 dark:text-black">
    <div class="max-w-full py-5 mt-10 mb-20 mx-auto overflow-hidden">
        <div class="w-full flex items-center flex-col gap-1 justify-center mb-16 px-4">
            <p class="text-sm sm:text-lg font-semibold text-rose-600">Words That Matter</p>
            <h3 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-center font-semibold">See Why Clients Keep Coming
                Back</h3>
        </div>
        <div class="flex flex-col gap-3">
            
            <div style="mask-image:linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)"
                class="relative flex justify-around gap-5 overflow-hidden shrink-0">
                <div class="max-w-full mx-auto">
                    <div class="px-4 md:px-10 mx-auto w-full">
                        <div
                            class="animate-scrollReverse flex flex-nowrap w-max min-w-full hover:[animation-play-state:paused] overflow-hidden relative gap-5 justify-around shrink-0">
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-lg font-extralight md:text-lg">
                                    "Working with Samuel was a game-changer! His Tailwind CSS skills brought our
                                    UI to life with a clean, modern, and fully responsive design."
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1665686307516-1915b9616526?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHxmZW1hbGV8ZW58MHwwfHx8MTc0MzU5Njc5OXww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">Sarah M</h5>
                                            <p class="text-sm md:text-base mt-[-4px] text-white/50 dark:text-black/30">
                                                Startup Founder</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "Finding a great Laravel developer is tough, but Samuel exceeded all my
                                    expectations. His code is clean, efficient, and highly scalable.
                                    "
                                </p>
                                <div
                                    class="flex overflow-hidden md:h-[28%] h-[30%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwzfHxwZXJzb258ZW58MHwwfHx8MTc0MzMyNzEzNHww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">Daniel S</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Business Owner</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "A rare talent who excels in Tailwind, Nuxt.js, and Laravel! He built a full-stack
                                    web app that is both powerful and beautiful."
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHxwZXJzb258ZW58MHwwfHx8MTc0MzMyNzEzNHww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">John M</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Startup CEO</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "I struggled with bloated CSS files until Samuel revamped our frontend using
                                    Tailwind. The result? A lightweight, maintainable, and stunning interface!"
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1473830394358-91588751b241?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxwZXJzb258ZW58MHwwfHx8MTc0MzMyNzEzNHww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">James L</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Frontend Engineer</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "I can’t recommend Samuel enough! He transformed our Vue.js project into a
                                    high-performance Nuxt.js app with seamless API integration."
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8cGVyc29ufGVufDB8MHx8fDE3NDMzMjcxMzR8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">Laura P</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Marketing Manager</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "If you’re looking for a top-tier Laravel developer, look no further. Samuel
                                    delivers quality code and always meets deadlines."
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1665686308827-eb62e4f6604d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8d29tYW58ZW58MHwwfHx8MTc0MzM5ODE0N3ww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">Lisa T</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Tech Founder
                                            </p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "Thanks to Samuel, our Nuxt.js app now loads in a fraction of the time and ranks
                                    higher on search engines!"
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8bWVufGVufDB8MHx8fDE3NDMzOTgxOTd8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md"> Kevin H</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Digital Marketer
                                            </p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
            
            <div style="mask-image:linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)"
                class="relative flex justify-around gap-5 overflow-hidden shrink-0">
                <div class="max-w-full mx-auto">
                    <div class="px-4 md:px-10 mx-auto w-full">
                        <div
                            class="animate-scroll flex flex-nowrap w-max min-w-full hover:[animation-play-state:paused] overflow-hidden relative gap-5 justify-around shrink-0">
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "Nuxt.js can be tricky, but Samuel made everything look effortless. From state
                                    management to routing, they nailed it."
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw0fHxwZXJzb258ZW58MHwwfHx8MTc0MzU5NTUxMXww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">Marry J.</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Startup Founder</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "The Laravel API Samuel built for us was robust, secure, and well-documented. Our
                                    mobile app team loved working with it!
                                    "
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1500048993953-d23a436266cf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxwZXJzb258ZW58MHwwfHx8MTc0MzU5NTUxMXww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md"> Jason K.</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Mobile App Developer</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "We had a messy PHP codebase, and Samuel expertly migrated it to Laravel. The new
                                    system is modern, scalable, and easy to maintain."
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxtZW58ZW58MHwwfHx8MTc0MzU5NTk5Nnww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">Mark E.</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Software Architect</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "The way Samuel implements Tailwind is incredible. Our website now looks amazing and
                                    performs better than ever!"
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1450133064473-71024230f91b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8bWVufGVufDB8MHx8fDE3NDM1OTU5OTZ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">David T.</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                E-commerce Manager
                                            </p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 darK:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "A complete package! Samuel crafted a sleek UI with Tailwind, built a
                                    high-performance Nuxt.js frontend, and powered it with a rock-solid Laravel
                                    backend."
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw0fHxtZW58ZW58MHwwfHx8MTc0MzU5NTk5Nnww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">Steve J.</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Project Manager</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "From the frontend to the backend, Samuel handled everything flawlessly. Their
                                    attention to detail and problem-solving skills are unmatched."
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1442328166075-47fe7153c128?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxtZW58ZW58MHwwfHx8MTc0MzU5NTk5Nnww&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">Ethan F.</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                Lead Developer</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                            
                            <div
                                class="flex flex-col justify-between h-[220px] rounded-sm border-[1.2px] border-white/20 dark:border-black/20 shrink-0 grow-0 md:w-[440px] sm:w-[320px] w-[280px]">
                                <p class="px-5 py-5 tracking-tight text-md font-extralight md:text-lg">
                                    "Our team was new to Tailwind, but Samuel guided us through the transition
                                    effortlessly, making our development process faster and more efficient."
                                </p>
                                <div
                                    class="flex overflow-hidden h-[30%] md:h-[28%] gap-1 w-full border-t-[1.2px] border-white/10 dark:border-black/10">
                                    <div class="flex items-center w-3/4 gap-3 px-4 py-3">
                                        <img class="w-10 h-10 rounded" src="https://images.unsplash.com/photo-1569012871812-f38ee64cd54c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8cHJvZ3JhbW1lcnxlbnwwfDB8fHwxNzQzNTk2NDUxfDA&ixlib=rb-4.0.3&q=80&w=1080" alt="avatar">
                                        <div class="flex flex-col items-start justify-start flex-1 gap-0">
                                            <h5 class="text-base font-medium md:text-md">Melissa K.</h5>
                                            <p class="text-sm md:text-base text-white/50 dark:text-black/30 mt-[-4px]">
                                                SaaS Founder</p>
                                        </div>
                                    </div>
                                    <div class="w-[1px] bg-white/10 dark:bg-black/20"></div>
                                    <div class="flex items-center justify-center max-w-full mx-auto">
                                        <a target="_blank" href="">
                                            <svg width="30" stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-full">
                                                <path
                                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
                                                </path>
                                            </svg></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>