Hello Acode Master! 👋

is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 21-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are blog page template, article page template,Author box, User information,Product Showcase, Product card

Card Blog post page Profile Product

Author Code Master(Mfuranziza Dusabe Hamza)

Tailwind v3.4 1.3k 31

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://scontent.fkgl4-1.fna.fbcdn.net/v/t39.30808-6/494544466_1510445637027528_3973715697786112913_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=107&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeHlt-DuLefmz-QQrMnIFnXvewZmj8H-UCh7BmaPwf5QKEQ3DSRHtq3WHrKO-SMeMkANX92RNoVDe2wwtWhKJIeL&_nc_ohc=s9XHnkRpahwQ7kNvwE4mEuj&_nc_oc=AdmdQoX_Tjl10_SqEyIL2EC34L7_NnbyLeZ-TJ7Q6lUqZr_7i_LTpxJo7KjxIcZ56tc&_nc_zt=23&_nc_ht=scontent.fkgl4-1.fna&_nc_gid=YVaLnv7QII17mex11uNjCQ&oh=00_AfIa7-S8sjZT6SfblbKf5eyafi2d4aSP5q-vJPVmDJlv2A&oe=6840728E" 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://scontent.fkgl4-1.fna.fbcdn.net/v/t39.30808-6/494544466_1510445637027528_3973715697786112913_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=107&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeHlt-DuLefmz-QQrMnIFnXvewZmj8H-UCh7BmaPwf5QKEQ3DSRHtq3WHrKO-SMeMkANX92RNoVDe2wwtWhKJIeL&_nc_ohc=s9XHnkRpahwQ7kNvwE4mEuj&_nc_oc=AdmdQoX_Tjl10_SqEyIL2EC34L7_NnbyLeZ-TJ7Q6lUqZr_7i_LTpxJo7KjxIcZ56tc&_nc_zt=23&_nc_ht=scontent.fkgl4-1.fna&_nc_gid=YVaLnv7QII17mex11uNjCQ&oh=00_AfIa7-S8sjZT6SfblbKf5eyafi2d4aSP5q-vJPVmDJlv2A&oe=6840728E" 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://scontent.fkgl4-1.fna.fbcdn.net/v/t39.30808-6/494544466_1510445637027528_3973715697786112913_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=107&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeHlt-DuLefmz-QQrMnIFnXvewZmj8H-UCh7BmaPwf5QKEQ3DSRHtq3WHrKO-SMeMkANX92RNoVDe2wwtWhKJIeL&_nc_ohc=s9XHnkRpahwQ7kNvwE4mEuj&_nc_oc=AdmdQoX_Tjl10_SqEyIL2EC34L7_NnbyLeZ-TJ7Q6lUqZr_7i_LTpxJo7KjxIcZ56tc&_nc_zt=23&_nc_ht=scontent.fkgl4-1.fna&_nc_gid=YVaLnv7QII17mex11uNjCQ&oh=00_AfIa7-S8sjZT6SfblbKf5eyafi2d4aSP5q-vJPVmDJlv2A&oe=6840728E" 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://scontent.fkgl4-1.fna.fbcdn.net/v/t39.30808-6/494544466_1510445637027528_3973715697786112913_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=107&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeHlt-DuLefmz-QQrMnIFnXvewZmj8H-UCh7BmaPwf5QKEQ3DSRHtq3WHrKO-SMeMkANX92RNoVDe2wwtWhKJIeL&_nc_ohc=s9XHnkRpahwQ7kNvwE4mEuj&_nc_oc=AdmdQoX_Tjl10_SqEyIL2EC34L7_NnbyLeZ-TJ7Q6lUqZr_7i_LTpxJo7KjxIcZ56tc&_nc_zt=23&_nc_ht=scontent.fkgl4-1.fna&_nc_gid=YVaLnv7QII17mex11uNjCQ&oh=00_AfIa7-S8sjZT6SfblbKf5eyafi2d4aSP5q-vJPVmDJlv2A&oe=6840728E" 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://scontent.fkgl4-1.fna.fbcdn.net/v/t39.30808-6/494544466_1510445637027528_3973715697786112913_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=107&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeHlt-DuLefmz-QQrMnIFnXvewZmj8H-UCh7BmaPwf5QKEQ3DSRHtq3WHrKO-SMeMkANX92RNoVDe2wwtWhKJIeL&_nc_ohc=s9XHnkRpahwQ7kNvwE4mEuj&_nc_oc=AdmdQoX_Tjl10_SqEyIL2EC34L7_NnbyLeZ-TJ7Q6lUqZr_7i_LTpxJo7KjxIcZ56tc&_nc_zt=23&_nc_ht=scontent.fkgl4-1.fna&_nc_gid=YVaLnv7QII17mex11uNjCQ&oh=00_AfIa7-S8sjZT6SfblbKf5eyafi2d4aSP5q-vJPVmDJlv2A&oe=6840728E" 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://scontent.fkgl4-1.fna.fbcdn.net/v/t39.30808-6/494544466_1510445637027528_3973715697786112913_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=107&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeHlt-DuLefmz-QQrMnIFnXvewZmj8H-UCh7BmaPwf5QKEQ3DSRHtq3WHrKO-SMeMkANX92RNoVDe2wwtWhKJIeL&_nc_ohc=s9XHnkRpahwQ7kNvwE4mEuj&_nc_oc=AdmdQoX_Tjl10_SqEyIL2EC34L7_NnbyLeZ-TJ7Q6lUqZr_7i_LTpxJo7KjxIcZ56tc&_nc_zt=23&_nc_ht=scontent.fkgl4-1.fna&_nc_gid=YVaLnv7QII17mex11uNjCQ&oh=00_AfIa7-S8sjZT6SfblbKf5eyafi2d4aSP5q-vJPVmDJlv2A&oe=6840728E" 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://scontent.fkgl4-1.fna.fbcdn.net/v/t39.30808-6/494544466_1510445637027528_3973715697786112913_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=107&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeHlt-DuLefmz-QQrMnIFnXvewZmj8H-UCh7BmaPwf5QKEQ3DSRHtq3WHrKO-SMeMkANX92RNoVDe2wwtWhKJIeL&_nc_ohc=s9XHnkRpahwQ7kNvwE4mEuj&_nc_oc=AdmdQoX_Tjl10_SqEyIL2EC34L7_NnbyLeZ-TJ7Q6lUqZr_7i_LTpxJo7KjxIcZ56tc&_nc_zt=23&_nc_ht=scontent.fkgl4-1.fna&_nc_gid=YVaLnv7QII17mex11uNjCQ&oh=00_AfIa7-S8sjZT6SfblbKf5eyafi2d4aSP5q-vJPVmDJlv2A&oe=6840728E" 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>

Related Examples

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.8k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.6k
User profile card with Cover Image

Noob

4 years ago

34k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.3k
Minimal Profile card

Abhijit Sen

3 years ago

12.4k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Author box

Mr Robot

3 years ago

12.5k
Profile card

Mr Robot

3 years ago

13.4k
User profile card

Mr Robot

3 years ago

12k
Product card

Simon Scheffer

3 years ago

32.5k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k