Esteban Benitez

"

Lorem, ipsum dolor sit amet consectetur adipisicing elit. At sit reprehenderit ipsum nostrum recusandae, debitis itaque, voluptates, dolore eligendi beatae error repellat earum cupiditate nulla. Minus ab magnam ipsa inventore?

John Doe

Web Developer

"

Lorem, ipsum dolor sit amet consectetur adipisicing elit. At sit reprehenderit ipsum nostrum recusandae, debitis itaque, voluptates, dolore eligendi beatae error repellat earum cupiditate nulla. Minus ab magnam ipsa inventore?

Maria Clark

Web Designer

                                
                                    <!-- component -->
<div class="flex justify-between w-full gap-4 overflow-y-hidden overflow-y-scroll rounded-md bg-blue-950 lg:py-5 flex-nowrap scrollbar-thin scrollbar-thumb-orange-400 scrollbar-track-blue-950">
    <div class="flex flex-col items-center w-full p-4 lg:flex-row">
        <div class="flex items-start justify-center w-2/12">
            <p class="font-serif text-center text-gray-400 text-9xl lg:text-left">"</p>
        </div>
        <div class="flex-1 w-[320px] lg:w-[1120px]">
            <div class="text-lg font-normal text-center text-gray-300 lg:text-left">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. At sit
                reprehenderit ipsum nostrum recusandae, debitis itaque, voluptates, dolore
                eligendi beatae error repellat earum cupiditate nulla. Minus ab magnam ipsa
                inventore?
            </div>
            <div class="flex items-center justify-center w-full mt-8">
                <img class="object-cover w-16 h-16 border-2 border-blue-500 rounded-full"
                    src="https://cdn.pixabay.com/photo/2017/05/06/18/12/avatar-2290470_1280.jpg"
                    alt="testimonial 1">
                <div class="flex-1 lg:pl-4">
                    <p class="text-2xl font-bold text-white">
                        John Doe
                    </p>
                    <p class="font-sans text-gray-400 text-md">
                        Web Developer
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="flex flex-col items-center w-full p-4 lg:flex-row">
        <div class="flex items-start justify-center w-2/12">
            <p class="font-serif text-center text-gray-400 text-9xl lg:text-left">"</p>
        </div>
        <div class="flex-1 w-[320px] lg:w-[1120px]">
            <div class="text-lg font-normal text-center text-gray-300 lg:text-left">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. At sit
                reprehenderit ipsum nostrum recusandae, debitis itaque, voluptates, dolore
                eligendi beatae error repellat earum cupiditate nulla. Minus ab magnam ipsa
                inventore?
            </div>
            <div class="flex items-center justify-center w-full mt-8">
                <img class="object-cover w-16 h-16 border-2 border-blue-500 rounded-full"
                    src="https://cdn.pixabay.com/photo/2019/03/21/20/31/glasses-4071877_960_720.jpg"
                    alt="testimonial 2">
                <div class="flex-1 lg:pl-4">
                    <p class="text-2xl font-bold text-white">
                        Maria Clark
                    </p>
                    <p class="font-sans text-gray-400 text-md">
                        Web Designer
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

                                
                                    //tailwind.config.js
const plugin = require("tailwindcss/plugin");

// You will need to add this into of tailwind plugins and install tailwind-scrollbar dependency
require("tailwind-scrollbar")({ nocompatible: true }),
plugin(function ({ addUtilities }) {
    addUtilities({
        ".scrollbar-hide": {
            /* IE and Edge */
            "-ms-overflow-style": "none",

            /* Firefox */
            "scrollbar-width": "none",

            /* Safari y Chrome */
            "&::-webkit-scrollbar": {
                display: "none",
            },
        },
    });
}),

Est Testimonials